Angular2如何删除ngFor中的元素

Question

如何从ngFor删除元素？ 我有这个ngFor其中有一个项目的Id以及我传递这在updateOrder()函数，以便它会知道我点击哪个项目。

getOrdersFromOrigin() {
    this.sharedService.getOriginSite()
      .subscribe(data => {
        this.isLoading = false;
        this.orderPreparing = data.Results
      })
  }

<div class="preparing" *ngFor="let prepare of orderPreparing">
 <p> {{ prepare.Item }} </p>
 <button class="btn btn-primary" (click)="updateOrder(prepare.Id)">It's Ready</button>
</div>

在我的updateOrder ，我的updateOrder函数中没有任何内容，因为我不确定如何删除相对于我在(click)=""事件中传递的Id的元素，它给了我很好的Id 。

这个updateOrder()正在工作，因为它从UI中删除它，但想法是删除后我想将它添加到集合中。

updateOrder(id) {
    for(let i = 0; i < this.orderPreparing.length; i++) {
  if (this.orderPreparing[i].Id === id) {
      this.orderPreparing.splice(i, 1);
      this.addToCollection.push(this.orderPreparing[i]);
      console.log(this.addToCollection);
      console.log('Changed Status to AwaitingToPick');
      break;
  }
}
  }

我添加了一个新的private addToCollection = []来将删除的item推送到一个数组，以便我可以将它添加到集合中。 但是上面的代码只接受最后一个index当我向数组中添加另一个时，它会破坏数组变为[Object{}, undefined]

Answer 1

有多种方法可以做到这一点。 看看这个，如果我不迟到：

updateOrder(id) {
  for(let i = 0; i < this.orderPreparing.length; i++) {
    if (this.orderPreparing[i].Id === id) {
        this.orderPreparing.splice(i, 1);
        break;
    }
  }
}

希望对你有用。

Answer 2

我猜想正在寻找的是从orderPreparing对象中删除它（如果你当然没有删除它的后端）。 你可以尝试这个：

updateOrder(id) {
    for(item in orderPreparing) {
        if(item[id] == id) {
            delete this.orderPreparing.item;
        }
    }
}

如果你有一个后端应用程序，你需要检查是否有一个脚本删除你的后端订单，在你的服务中调用一个函数，负责与你的api通信，然后包括组件中的服务，调用函数删除订单并再次更新订单。