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]
答
我想tou_re寻找是从orderpreparing对象中删除它(如果你,当然,没有后端可以删除它)。你可以试试这个:
updateOrder(id) {
for(item in orderPreparing) {
if(item[id] == id) {
delete this.orderPreparing.item;
}
}
}
如果你有这方面的后端应用程序,你需要检查是否有一个脚本来删除后端的顺序,提出了功能打电话给你服务负责与你的api进行通信,然后将服务包含在你的组件中,调用一个函数来删除订单并再次更新订单。
答
有多种方法可以做到这一点。看看这个,如果我不迟到:
updateOrder(id) {
for(let i = 0; i < this.orderPreparing.length; i++) {
if (this.orderPreparing[i].Id === id) {
this.orderPreparing.splice(i, 1);
break;
}
}
}
希望会为你工作。
将会有一个,我已经更新了原来的帖子,我已经添加了获取'ngFor'数据的位置。 – MrNew
那么atm只是将其从用户界面中删除,因为一旦我点击该按钮,它将从Prepare面板中删除,然后将其移动到Pickup。 – MrNew
对不起@MrNew,但我现在不明白你在问什么。 如果您想从orderPreparing中删除该项目,您已经有一个答案,但是当您刷新该页面时,数据将被刷新,并且它会再次向您显示该项目,因为它不会在后端被删除。 –