Javascript 关于Angular 6数据更改的更新

当15个请求结束时，我有一个包含15个响应的数组。我想在向数组中添加新响应而不刷新页面时更新视图

    loadItem(res: DashboardInfo[]): void {
    this.item.push([]); // ERROR
    this.item.push([]); // WARNING
    this.item.push([]); // INFORMATION
    this.item.push([]); // OK
    let element;
    while ((element = res.pop())) {
        let index: number;
        if (element.level === "ERROR") index = 0;
        else if (element.level === "WARNING") index = 1;
        else if (element.level === "INFORMATION") index = 2;
        else index = 3;
        if (element.path !== undefined) {
            if (this.featuresFlag.visibleFeatures.includes(element.path)) {
                this.item[index].push(element);
                this.item = this.item.slice();
            }
        }

    }
}

---

在模板上使用*ngFor trackBy属性

<div *ngFor="let i of items; trackBy: trackByFn"></div>

---

你可以在这里找到一个很好的例子：

@pascalpuetz有正确的答案。 但这里有一个更具体的例子：

如果卡具有此接口：

接口卡{
id:string；//唯一标识卡的值
键入：“错误”|“成功”|“警告”；
消息：字符串；
延迟：数字；
}

您可以通过卡对象的唯一属性（如id）来跟踪它们

trackcardsbyd（索引：编号，卡片：卡片）{
返回卡.id；
}

{{card.message}

或者，您可以通过他们在列表中的位置来跟踪他们：

trackCardsByIndex（索引：编号，卡片：卡片）{
收益指数；
}

{{card.message}

---

您可以看到一个工作示例。

您想用什么更新视图？你说你不想刷新DOM。DOM的哪一部分？你如何显示这个嵌套矩阵的东西？@Zlatko我想在不刷新仪表板的情况下更新仪表板上的卡。我的意思是，如果我有4张卡片，其中只有3张显示在仪表板上，当第四个请求结束时，我希望它显示在仪表板上，而不刷新它。如下面的答案所示，使用trackBy或OnPush更改检测策略，或两者的组合，都可以实现。trackBy用于一个项目时更容易使用，但是这里我有一张卡片要归还，所以我真的不知道如何处理。你的物品应该是“卡片”类型，或者你的卡片的代表性数据结构。TrackBy然后用于通过特定属性（例如id）识别您的卡感谢您的回答@toskv。实际上，它适用于需要几秒钟才能获得与其相关信息的卡。但是，我有一张可能需要1分钟以上的卡片，这张卡片只有在我刷新页面时才会显示。我的意思是，它并没有动态地添加到仪表板中：/无论计时器是什么，它都应该工作相同。也许还有别的事情发生了。您确定请求已解决吗？我会试着调试代码，看看会发生什么。是的，当我在浏览器中检查调用时，请求得到解决（1分钟后返回代码200），但它永远不会动态出现，我必须刷新页面才能看到卡。我会调试以了解发生了什么，谢谢

trackByFn(index, item) {
  return index; // or item.id
}