Angular 变化检测: how to refresh only certain items?

Question

假设我的屏幕上有 100 个由 *ngFor 生成的 div，它们从具有类似数据的对象中获取值

{A1:someOtherObject，A2:someOtherOtherObject...，J10:someOtherOtherObject}

我单击 A1，然后单击 J10，它们会切换其值。它变成了这样:

{A1:someOtherOtherObject，A2:someOtherObject...，J10:someOtherObject}

如何强制 Angular 只刷新两个仅保存 A1 和 J10 值的 div？我正在使用 ChangeDetectionStrategy.OnPush，在构造函数中我有 cd.detach() 并且仅在发生第二次点击时调用 cd.detectChanges() 。从我所看到和能够理解的来看，每个 div 都会触发它们的 *ngIf 因此它们中的每一个都会被重新创建。

我可以做些什么来 a) 覆盖正在刷新的内容或 b) 选择检测更改的内容？

Answer 1

如果您track the items在您的列表中，*ngFor="let item of items; trackBy: trackById"。然后它不会再次渲染所有项目。

trackById = trackBy('id');

...

export function trackBy(field: string): (_index: number, item: any) => string | number {
  return (_index: number, item: any) => {
    if (!item) {
      return null;
    }
    return item[field] as (string | number);
  };
}