Angular-使用異步管道的ngFor和trackBy

Question

我想使用trackBy來提高性能。 該列表的數據在更改時應該是不變的，並通過異步管道提供給模板。 雖然我一直在使用trackBy功能，但是每次發出新值時都會重新渲染整個列表。 即使數組內的對象使用相同的id保持不變，也會發生這種情況。

零件

export class AppComponent implements OnInit {
  data: Observable<any>;

  trackBy(index, item) {
    return item.id;
  }

  ngOnInit() {
    const data = interval(100).pipe(mapTo([
      { id: 1 }, { id: 2 }
    ]))

    this.data = data.pipe(map(events => events.map(event => ({ ...event }))));
  }
}

模板

<div *ngFor="let d of data | async; trackBy: trackBy">{{d}}</div>

此外，這里還有一個StackBlitz 。 每次將新值發送到ngFor渲染div標簽。

據我了解trackBy它應該檢測對象是相同的（通過id屬性），盡管引用已更改。 還是我明顯錯過了什么？

Answer 1

沒錯，當對象不變時，可以使用trackBy來避免重新渲染組件。 在字符串或數字上執行ngFor時，對於Angular來說是顯而易見的，但對復雜對象則不然。

從這個Observable開始，我做了一個小例子來解釋不同的情況：

this.animals = interval(1000)
    .pipe(take(30),
    map(v => ({ id: v} as Animal)),
    scan((acc, curr) => [...acc, curr], []));

此Observable的結果：

 []
 [{id: 0}]
 [{id: 0}, {id: 1}]
 ...

我創建了一個組件，該組件在每次渲染時均顯示輸入並具有隨機顏色，以使渲染更加明顯。

在使用此trackBy功能時，列表每次更改時都會渲染所有組件：

trackBy(index, item) {
    return Math.random();
}

使用trackBy函數時，每個組件僅呈現一次：

trackBy(index, item) {
    return item.id;
}

在這里您可以找到正在運行的示例。