javascript - 使用 IterableDiffer 在 Angular 8 中获取数组大小更改

Question

我有带有对象数组的 Angular 分量

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();
}

}

它可以工作，每次更改数组时我都可以进行更改。
所以现在我的问题是。如何办理登机手续 变化更改数组大小的对象，因为当我对该数组进行排序时也会触发它。 中没有房产可迭代更改 为此目的提出反对。

如果我能得到新大小的数组，我会这样做:

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 .评论它会帮助其他人/以后