Проблема обнаружения изменения углового массива

Question

Я работаю над компонентом уведомлений, в котором у меня есть массив объектов "error" и перебираю их, используя *ngFor. Моя проблема заключается в том, что Angular не будет регистрировать изменения в массиве, когда я изменяю его внутри подписки.

Мой код следующий:

  ngOnInit() {
    this.store.select().pipe(
      map(state => state.error),
      filter(error => !!error),
      map(error => ({text: error, display: 'block'}))
    ).subscribe(error => {

      // this does not get detected
      this.errors.push(error);

      setTimeout(() => {
        error.display = 'none';
      }, 4000)
    });

    // this gets detected
    this.errors.push({
      text: 'asd',
      display: 'block'
    })
  }

И связанный HTML:

      <div class="notification-wrapper">
          <div *ngFor="let error of errors" [style.display]="error.display" class="notification is-danger has-text-right">
              {{ error.text }}
          </div>
      </div>

Странно то, что если я заменяю подписку на setInterval, в которую я постоянно добавляю фиктивные ошибки, изменения отлавливаются Angular, и он ведет себя нормально.

Может кто-тообъясните мне, почему это работает таким образом, и, возможно, как это исправить? Спасибо.

Answer 1

Похоже, ваш код выполняется за пределами угловой зоны. Вы можете принудительно запустить его внутри:

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {}

...

this.store.select().pipe(
  map(state => state.error),
  filter(error => !!error),
  map(error => ({text: error, display: 'block'}))
).subscribe(error => {

  this.ngZone.run(() => {
    this.errors.push(error);

    setTimeout(() => {
      error.display = 'none';
    }, 4000)
  });
});