Почему переданный по конвейеру asyn c оператор вызывает сообщение ExpressionChangedAfterItHasBeenCheckedError в консоли браузера?

Question

При использовании наблюдаемого непосредственно в представлении, например:

<tr *ngFor="let device of devices$ | async">

консоль браузера отображает ошибку:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Если вместо этого использовать переменную-член компонента, как в:

<tr *ngFor="let device of devices">

и определяется как:

ngOnInit() {
  this.observeDevices();
}
private observeDevices(): void {
  this.devicesSubscription = this.deviceStore.getDevices()
  .subscribe((devices: Array<Device>) => {
    this.devices = devices;
  });
}

, тогда указанная ошибка не отображается.

Переменные-члены объявляются как:

devices$: Observable<Array<Device>>;
devices: Array<Device>;

Под Angular release ~9.0.6

ОБНОВЛЕНИЕ: Чтобы обновить представление после изменения в блоке subscribe(), мне также нужно было явно вызвать обнаружение изменений, как в :

private observeDevices(): void {
  this.devicesSubscription = this.deviceStore.getDevices()
  .subscribe((devices: Array<Device>) => {
    this.devices = devices;
    this.changeDetector.detectChanges();
  });
}

В противном случае массив в представлении не будет refre sh.

Answer 1

Асин c -пайп нужен только в том случае, если devices является наблюдаемым. В вашем коде вы явно назначаете ему массив, поэтому вам не нужен канал.