ngFor数组中的离子编辑项目数据答案

【问题标题】：Ionic Editing item data in an ngFor arrayngFor数组中的离子编辑项目数据
【发布时间】：2018-05-11 16:39:22
【问题描述】：

所以我有一个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。

非常感谢您的帮助，谢谢！

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案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;
  }
});

【讨论】：