Javascript Angular2如何删除ngFor中的元素

如何从

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>

---

我添加了一个新的

private addToCollection=[]

以将删除的

项

推送到一个数组中，以便将其添加到集合中。然而，上面的代码只接受最后一个

索引

当我向数组中添加另一个索引时，它会破坏数组，使数组变成

[对象{}，未定义]

我想你要找的是从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;
    }
  }
}

updateOrder（id）{
for（设i=0；i

---

希望对你有用。

会有一个，我已经更新了我添加的原始帖子，在那里我获得了

ngFor

的数据。好吧，我只是想从UI中删除它，因为一旦我单击按钮，它将从“准备”面板中删除，然后移动到“取货”面板。很抱歉@MrNew，但我没有真正理解你现在提出的问题。如果你想从orderPreparing中删除该项目，你已经有了答案，但是当你刷新页面时，数据将被刷新，并且它将再次显示该项目，因为它在后端没有被删除。是的，我没有说你的答案是错的，只是说现在它只是从UI中删除：）我已经勾选了你的答案。我理解。我只是一开始没有理解你。我已经在那里添加了如何做的“基础知识”，但在不了解后端和文件结构的情况下，我无法准确地告诉您如何做。这是一个很好的答案，假设我们都理解问题的含义。哦，很酷，谢谢：）是的，这就是我想要的。我想我需要做一个

indexOf（）.splice（）

@AvneshShakya来跟进，我已经更新了上面的问题。一旦我删除了

id/项

，我希望它们被添加到

ReadyToPick

的集合中。请参见上面的编辑，还是我要创建一个新问题？在if条件下从orderPreparing中删除之前，您需要推入orderPreparing:

this.addToCollection.push（this.orderPreparing[I]）；本.顺序准备.拼接（i，1）希望对你有用。谢谢
updateOrder(id) {
  for(let i = 0; i < this.orderPreparing.length; i++) {
    if (this.orderPreparing[i].Id === id) {
        this.orderPreparing.splice(i, 1);
        break;
    }
  }
}