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

在模板上使用* 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

Answer 2

@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。

关于Angular 6的datachange更新

2 个答案: