使用 IterableDiffer 在 Angular 8 中获取数组大小更改答案

【问题标题】：Get array size changes in Angular 8 using IterableDiffer使用 IterableDiffer 在 Angular 8 中获取数组大小更改
【发布时间】：2020-09-15 15:08:56
【问题描述】：

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

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

}

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

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

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

}

它会解决问题，但还有其他解决方案吗？

【问题讨论】：

stackoverflow.com/questions/35748484/…
这能回答你的问题吗？ Detect changes in objects inside array in Angular2
不，我不认为这是我需要的，因为示例中的问题是他们将获取数组中的每个值并检查属性更改。但我需要检查何时从该数组中添加或删除元素
试试这个：- this.iterableDiffer = iterableDiffers.find(this.config).create();
我在下面添加了我的答案。和一个有效的堆栈闪电战。

标签： javascript angular iterable angular2-changedetection

【解决方案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。评论它会帮助其他人/以后}

【讨论】：

【解决方案2】：

问题在于你的构造函数。

constructor(private iterableDiffers: IterableDiffers){
   this.iterableDiffer = iterableDiffers.find(this.config).create()
}

工作 Stackblitz :- https://stackblitz.com/edit/angular-uqivci

【讨论】：

它工作正常。但我的问题是在 ngDoCheck() 内部如何检查数组的大小是否已更改。我的意思是添加了项目或删除了项目，但在我们第一次使用值初始化数组时跳过此检查
在推送和弹出其工作时，您需要更改长度吗？如果一个元素被添加或删除。这意味着长度正在改变。你能举个例子你想要什么？
就像我上面的例子一样，我有回调到 each addeditem，你可以添加到 eachremoveditem。在这些回调中你得到你的数组长度？以前的数组长度将是当前长度 - 您在回调中收到的项目数？