离子 编辑 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
});  
});
}
});

这工作正常，每次都会在列表中添加新数据 事件将触发。但是，该事件可以包含已经 数组中的现有项。

我了解我可以找到现有项目的indexitems并以这种方式更新数据，但是我需要更直接的 编辑现有数据的方法，可能是通过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;
}
});