Angular2如何刪除ng中的元素

如何從ngFor中刪除元素？我有這ngFor項目有Id以及我通過updateOrder()功能，所以它會知道我點擊哪個項目。Angular2如何刪除ng中的元素

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功能我不知道如何刪除一個元素相對於Id我通過在(click)=""事件，它給我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]

來源

2016-11-23 MrNew

我想tou_re尋找是從orderpreparing對象中刪除它（如果你，當然，沒有後端可以刪除它）。你可以試試這個：

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

如果你有這方面的後端應用程序，你需要檢查是否有一個腳本來刪除後端的順序，提出了功能打電話給你服務負責與你的api進行通信，然後將服務包含在你的組件中，調用一個函數來刪除訂單並再次更新訂單。

來源

2016-11-23 17:53:50

將會有一個，我已經更新了原來的帖子，我已經添加了獲取'ngFor'數據的位置。 – MrNew

那麼atm只是將其從用戶界面中刪除，因爲一旦我點擊該按鈕，它將從Prepare面板中刪除，然後將其移動到Pickup。 – MrNew

對不起@MrNew，但我現在不明白你在問什麼。如果您想從orderPreparing中刪除該項目，您已經有一個答案，但是當您刷新該頁面時，數據將被刷新，並且它會再次向您顯示該項目，因爲它不會在後端被刪除。 –

有多種方法可以做到這一點。看看這個，如果我不遲到：

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

希望會爲你工作。

來源

2016-11-23 17:58:05

這是一個很好的答案，假設我們都明白問題在問什麼。 – VSO

哦，很酷，謝謝:)是啊，這就是我想要的。我以爲我需要做一個'indexOf（）。splice（）' – MrNew

@AvneshShakya只是爲了跟進，我已經更新了我的問題。一旦我刪除了'id/item'，我希望它們被添加到說'ReadyToPick'的集合中。看到上面的編輯或我應該創建一個新的問題？ – MrNew

Angular2如何刪除ng中的元素

回答

相關問題