Question

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

1st time:

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

2nd time:

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

我想在UI中显示所有3个对象，但是我希望更改仅反映到Object1和Object3，并且我不想 TOUCH 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
  }
}

仅更新ngFor内的数组内的对象吗？

1 个答案: