Получить изменения размера массива в Angular 8 с помощью IterableDiffer

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

}

Это работает, и я могу получать изменения каждый раз при изменении массива. Итак, теперь мой вопрос. Как проверить в объекте изменений , что размер массива изменился, потому что он запускается также, когда я сортирую этот массив. Для этой цели в объекте 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. Комментарии об этом помогут другим / позже}

Answer 2

Проблема с вашим конструктором.

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

Рабочий стек: - https://stackblitz.com/edit/angular-uqivci