javascript - 在AngularJs上删除刚创建的对象

我有一个搜索列表。

search.html：

<ul class="col-xs-12" ng-repeat="search in searchesCtrl.searches">
    <li>
      <a href="#">{{search.url}}</a><button class="btn btn-danger" ng-click="searchesCtrl.deleteSearch(search)">Delete</button>
    </li>
</ul>

<div class="input-group">
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.name"/>
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.url"/>
    <span class="input-group-btn">
         <a class="btn btn-primary" ng-click="searchesCtrl.addNewSearch()">Go</a>
    </span>
</div>

search.controller.js：

'use strict';

(function () {

class SearchesComponent {
  constructor($http) {
     this.$http = $http;
     this.searches = [];
  }

  $onInit() {
    this.$http.get('/api/searches')
      .then(response => {
        this.searches = response.data;
      });
  }

  addNewSearch() {
    if (this.newSearch) {
      this.$http.post('/api/searches', {
        url: this.newSearch.url,
        name: this.newSearch.name
      }).then(() => {
        this.searches.push(this.newSearch);
        this.newSearch = '';
      });
    }
  }

  deleteSearch(search) {
    this.$http.delete('/api/searches/' + search._id)
      .then(() => {
        this.searches.splice(this.searches.indexOf(search),1);
      });
  }
}

angular.module('myApp')
  .component('searches', {
    templateUrl: 'app/searches/searches.html',
    controller: SearchesComponent,
    controllerAs: 'searchesCtrl'
  });
})();

如果我尝试删除刚刚添加的搜索而没有刷新页面，则该页面无法正常工作。
ng-click="searchesCtrl.deleteSearch(search)"正在呼叫
/api/searches/undefined。

我尝试在没有$ index解决方案的情况下工作。可能吗 ？

最佳答案

因为新添加的search似乎没有_id参数，因为您直接在this.newSearch数组中直接压入searches。

基本上，您的add new post方法应该返回一个对象实体，该对象实体已保存在Database中，并且服务器将填充正确的_id。接下来，将新的实体对象推送到searches数组。我个人仍然觉得这种方法很糟糕，因为我们假设只有一个用户要使用该系统。由于我们仅负责更新javascript中的searches对象。

我想说的是这里，而不是本地维护，您应该重新运行get调用以获取所有已经在执行searches函数的$onInit。因此，它将确保您在UI上看到的列表与服务器同步。删除和保存对象时必须调用getSearches方法，这是正确的方法。

码

class SearchesComponent {
  constructor($http) {
     this.$http = $http;
     this.searches = [];
  }

  getSearches(){
    this.$http.get('/api/searches')
      .then(response => {
        this.searches = response.data;
      });
  }

  $onInit() {
    this.getSearches(); //retrieving list of searches from server
  }

  addNewSearch() {
    if (this.newSearch) {
      this.$http.post('/api/searches', {
        url: this.newSearch.url,
        name: this.newSearch.name
      }).then(() => {
        this.getSearches(); //asking for list from server
      });
    }
  }

  deleteSearch(search) {
    this.$http.delete('/api/searches/' + search._id)
      .then(() => {
        this.getSearches(); //asking for list from server.
      });
  }
}