Ionic 编辑 ngFor 数组中的项目数据

Question

所以我有一个 list.html 和 list.ts 文件

这是我使用 *ngFor

的列表

<ion-list>
    <ion-item *ngFor="let item of items">
        <h2>{{item.name}}</h2>
        <p>{{item.description}}</p>
        <p>{{item.amount}}</p>
        <p>{{item.uniqueID}}</p>
    </ion-item>
</ion-list>

在 lists.ts 中，我有一个函数可以获取有关事件的新数据，

this.events.on('dataAvailable', (data) => {

      for (var i = 0; i < data.length; i++){

        this.ngZone.run(() => {

          this.items.push({
            name: data[0].name,
            description: data[0].description,
            amount: data[0].amount,
            uniqueID: data[0].uniqueID
          });  

        });

      }

});

这很好用，每次都会在列表中添加新数据事件触发。但是，该事件可以包含一个已经存在的数据数组中的现有项。

我知道我可以找到已经存在的项目的 index 在 items 中并以这种方式更新数据，但是我需要更直接的编辑现有数据的方法，可能是 uniqueID.

非常感谢帮助，谢谢！

Answer 1

将数组映射到uniqueID，看看新项是否已经存在，然后根据索引决定做什么：

this.ngZone.run(() => {
  let index = this.items.map(x => x.uniqueID).indexOf(data[0].uniqueID);
  let newItem = {
    name: data[0].name,
    description: data[0].description,
    amount: data[0].amount,
    uniqueID: data[0].uniqueID
  }
  if (index !== -1) {
    this.items.push(newItem);
  } else {
    this.items[index] = newItem;
  }
});

Ionic 编辑 ngFor 数组中的项目数据

Ionic Editing item data in an ngFor array

typescript

ionic-framework

ionic2

ionic3

angular