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中的元素

回答

相关问题