Angular 6 上的数据更改更新

Question

当 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();
            }
        }

    }
}

Answer 1

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

如果卡片有这个接口：

interface Card {
  id: string; // a value that uniquely identifies a card
  type: 'error' | 'success' | 'warning';
  message: string;
  delay: number;
}

您可以通过 Card 对象的独特属性（例如 id）来跟踪它们。

trackCardsById(index: number, card: Card) {
  return card.id;
}

<div *ngFor="let card of cards; trackBy:trackCardsById " class="card" [ngClass]="card.type">
  {{card.message}}
</div>

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

trackCardsByIndex(index: number, card: Card) {
  return index;
}

<div *ngFor="let card of cards; trackBy:trackCardsByIndex " class="card" [ngClass]="card.type">
  {{card.message}}
</div>

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

Answer 2

在您的模板上使用 *ngFor trackBy 属性。

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

在你的 component.ts 上

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

你可以在这里找到一个很好的例子：https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5