angular - 只更新 ngFor 内部数组中的已更改对象？

Question

我每秒都有一个来自服务器的 JSON(对象数组)。我只想为数据更改的对象更新 UI，而未更改的对象保持不变。我假设数据从服务器到达 2 次。

1st time:

[
  {} //Object1
  {} //Object2
  {} //Object3
]

2nd time:

 [
  {} //Object1.Changed
  {} //Object2.Unchanged
  {} //Object3.changed
 ]

我想在 UI 中显示所有 3 个对象，但我希望更改仅反射(reflect)到 Object1 和 Object3，我不想 触摸 Object2，因为它没有改变。

是否可以 ？

Answer 1

为了避免这种昂贵的操作，您可以自定义默认跟踪算法。通过提供 trackBy 选项 NgForOf . trackBy 接受一个有两个参数的函数:index 和 item。如果给定了 trackBy，Angular 会根据函数的返回值跟踪变化。

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }

  getItems() {
    this.collection = this.getItemsFromServer();
  }

  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }

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