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通信，然后包括組件中的服務，調用函數刪除訂單並再次更新訂單。