Angular2 ngFor OnPush 变化检测与数组突变

Question

我有一个数据表组件 ( angular2-data-table) 项目，我们将项目从 Angular 的传统变化检测更改为 OnPush 以优化渲染速度。

实现新的变更检测策略后，当数据对象发生突变(例如对象的属性更新)时，会出现一个引用表未更新的错误引用:https://github.com/swimlane/angular2-data-table/issues/255 .可以为这种类型的需求创建一个强大的用例，例如对大型数据集合(如股票代码)中的单个属性进行内联编辑或外部数据更改。

为了解决这个问题，我们添加了一个名为 trackByProp 的自定义 trackBy 属性检查器。引用:commit .不幸的是，这个解决方案没有解决问题。

关于 demo page在实时重新加载下，您可以看到上面提交中引用的演示正在运行，但在您单击之前不会更新表，从而触发更改检测。

组件的结构是这样的:

Table > Body > Row Group > Row > Cell

所有这些组件都实现了OnPush。我在行 setter 中使用 getter/setter 来触发页面重新计算，如图所示 here .

对于那些实现此模式的人，我们希望继续使用 OnPush 更改检测，但是，作为一个具有多个消费者的开源项目，人们可能会争论对可见的某种自定义检查功能屏幕上的行值。

综上所述，trackBy 不会触发行单元格值的变化检测，实现此目的的最佳方法是什么？

Answer 1

Angular2 变化检测不检查数组或对象的内容。

一个 hacky 的解决方法是在突变后创建数组的副本

this.myArray.push(newItem);
this.myArray = this.myArray.slice();

这样 this.myArray 引用了一个不同的数组实例，Angular 将识别这个变化。

另一种方法是使用IterableDiffer(对于数组)或KeyValueDiffer(对于对象)

// inject a differ implementation 
constructor(differs: KeyValueDiffers) {
  // store the initial value to compare with
  this.differ = differs.find({}).create(null);
}

@Input() data: any;

ngDoCheck() {
  var changes = this.differ.diff(this.data); // check for changes
  if (changes && this.initialized) {
    // do something if changes were found
  }
}

另见 https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/common/src/directives/ng_class.ts#L122