Функция Asyn c не обновляет вид

Question

У меня возникли некоторые проблемы с момента обновления до Angular 9. Например, для меня нормально работал следующий код:

this.countdownSubscription = interval(1000).subscribe(() => {
  this.recentAuctions.forEach(a => {
    a.timeLeft = this.auctionService.getTimeLeft(a);
  });
});

Итак, внутри этой подписки я меняюсь timeLeft на объекте auction. В HTML я показываю это время. Однако изменение не отражается в представлении, пока я не вызову detectChanges() в экземпляре ChangeDetectorRef.

Это ожидаемое поведение? Вы должны вызывать detectChanges() после изменения представления в asyn c функциях? Если нет, в чем может быть проблема? Любая помощь приветствуется. Спасибо.

Answer 1

Странно, как эта проблема появилась в Angular 9, но раньше проблем не было.

Единственная идея, которая у меня есть, - попытаться обновить объект a и массив recentAuctions неизменным образом, чтобы они получите новые указатели на то, где они находятся в памяти, и, надеюсь, активирует обнаружение изменений.

Попробуйте:

this.countdownSubscription = interval(1000).subscribe(() => {
  this.recentAuctions = this.recentAuctions.map(auction => ({
     ...auction,
     timeLeft: this.auctionService.getTimeLeft(auction),
  }));
});

Проверьте, работает ли это. .map преобразует массив объектов в новое место в памяти, а оператор распространения ...auction распространит предыдущие ключи / значения объекта в новое место в памяти, но timeLeft будет перезаписано.

Answer 2

Использование NgZone.

Запустите вашу функцию внутри функции run:

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

constructor(private zone: NgZone) {}

MyFunction() {
    this.countdownSubscription = interval(1000).subscribe(() => {
        this.zone.run(() => this.recentAuctions.forEach(a => a.timeLeft = this.auctionService.getTimeLeft(a)));
    });
}

Это обновит ваш обзор. Подробнее о NgZone: https://angular.io/api/core/NgZone