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

在我的Id中，我的updateOrder函数中没有任何内容，因为我不确定如何删除相对于我在(click)=""事件中传递的Id的元素，它给了我updateOrder()就好了。

此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]，当我向数组中添加另一个时，它会使数组变为(defmacro defn-args [fn-name fn-args & forms] `(defn ~fn-name ~(eval fn-args) ~@forms)) (def square-args '[x] ) ; must quote [x] here (defn-args my-square square-args (* x x)) (my-square 3) ;=> 9

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

希望对你有用。

Answer 2

我猜想正在寻找的是从orderPreparing对象中删除它（如果你当然没有删除它的后端）。你可以尝试这个：

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

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

Angular2如何删除ngFor中的元素

2 个答案: