Angular 变化检测：如何只刷新某些项目？

Question

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

之类的数据

{A1: someObject, A2: someOtherObject..., J10: someOtherOtherObject}

我点击 A1，然后点击 J10，它们会切换它们的值。改为：

{A1: someOtherOtherObject, A2: someOtherObject..., J10: someObject}

如何强制 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);
  };
}

Angular 变化检测：如何只刷新某些项目？

Angular change detection: how to refresh only certain items?

angular2-changedetection

angular

angular-changedetection

angular7