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函数中，我没有任何与传入的(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，当我向数组中再添加另一个 index 时，它会破坏数组并变成[Object{}, undefined]

- MrNew

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;
    }
  }
}

希望这对你有用。

- Avnesh Shakya

---

这是一个很好的答案，假设我们都理解问题在问什么。 - VSO

哦，太棒了，谢谢 :) 是的，这就是我想要的。我以为我需要做一个 indexOf().splice()。 - MrNew

@AvneshShakya，跟进一下，我已经更新了上面的问题。一旦我删除id/item，我希望它们被添加到名为ReadyToPick的集合中。请参见上面的编辑，或者我应该创建一个新问题？ - MrNew

在if条件中，在从orderPreparing中移除之前，您需要先将其推入orderPreparing中： this.addToCollection.push(this.orderPreparing[i]);this.orderPreparing.splice(i, 1); 希望对您有帮助。谢谢 - Avnesh Shakya

Answer 2

我猜你想要的是从orderPreparing对象中删除它（如果你没有用于删除它的后端）。你可以尝试这个：

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

如果你有一个后端应用，你需要检查是否有一个脚本在后端删除订单，在你的服务中编写调用该函数的功能，负责与api通信，然后将服务包含在组件中，调用一个函数来删除订单并再次更新订单。

- Dawid Zbiński

---

会有一个，我已经更新了原始帖子，我添加了ngFor数据的获取位置。 - MrNew

目前只是从用户界面中删除它，因为一旦我点击按钮，它就会从准备面板中移除，然后移到取货面板中。 - MrNew

很抱歉@MrNew，我现在不太明白你的问题。 如果你想从orderPreparing中删除该项，你已经有了答案，但是当你刷新页面时，数据将被刷新，它会再次显示该项，因为它在后端没有被删除。 - Dawid Zbiński

是的，我并没有说你的答案是错误的，只是说明目前它只是从UI中删除而已 :) 我已经选中了你的答案。 - MrNew

我明白了，一开始没听懂你的意思。我已经添加了如何做这件事的“基础知识”，但是由于缺乏你的后端和文件结构方面的了解，我无法准确告诉你如何去做。 - Dawid Zbiński