更新仅在ngFor内的Array内更改的对象？

Question

我有一个来自服务器的JSON（对象数组）每秒。我想只更新数据更改和未更改对象之前保持相同的对象的UI。我假设数据从服务器到达2次。

1st time:

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

2nd time:

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

我想在UI中显示所有3个对象，但我希望更改只反映到Object1和Object3，我不想触及Object2，因为它没有被更改。

可能吗 ？

Answer 1

为避免这种昂贵的操作，您可以自定义默认跟踪算法。通过向NgForOf提供trackBy选项。 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
  }
}