使用 IterableDiffer 获取 Angular 8 中数组大小的变化

Question

我有带有对象数组的角度分量

export class AlertsConfigListComponent implements OnInit, DoCheck {
@Input() config: ProductAlertConfig[];

并使用 IterableDiffer 来获取该数组的更改： constructor(private iterableDiffers: IterableDiffers) { this.iterableDiffer = iterableDiffers.find([]).create(null); }

ngDoCheck(): void {
let changes : IterableChanges<ProductAlertConfig> = this.iterableDiffer.diff(this.config);
if (changes) {
  this.doSmth();
}

}

它有效，每次更改数组时我都可以得到更改。所以现在我的问题是。如何检查数组大小已更改的更改对象，因为当我对此数组进行排序时也会触发它。IterableChanges对象中没有用于此目的的属性。

如果我可以获得新的数组大小，我会这样做：

ngDoCheck(): void {
let changes : IterableChanges<ProductAlertConfig> = this.iterableDiffer.diff(this.config);
if (changes && newSize !== oldSize) {
  this.doSmth();
}

}

它可以解决问题，但是还有其他解决方案吗？

Answer 1

不知道有没有直接的方法。一种解决方法是检查是否有通过滥用方法和/块向数组添加/forEachAddedItem删除forEachRemovedItem的try元素catch。尝试以下操作

ngDoCheck(): void {
  let changes: IterableChanges<ProductAlertConfig> = this.iterableDiffer.diff(this.config);
  let lengthChanged: boolean = false;

  if (changes) {
    try {
      changes.forEachAddedItem(item => {
        if (item) {
          lengthChanged = true;
          throw 'Array length changed';           // break from the `forEach`
        }
      });

      if (!lengthChanged) {                       // proceed only if `lengthChanged` is still `false`
        changes.forEachRemovedItem(item => {
          if (item) {
            lengthChanged = true;
            throw 'Array length changed';         // break from the `forEach`
          }
        });
      }
    } catch (e) {
      // pass
    }

    if (lengthChanged) {
      this.doSmth();
    }
  }
}

^{这里故意使用 Try/catch 来打破forEach. 评论它会帮助其他人/以后}