异步功能未更新视图

Question

自从更新到Angular 9以来，我一直遇到一些问题。例如，以下代码过去对我来说运行良好：

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

因此，在此订阅中，我正在更改timeLeft对象上的auction。在HTML中，我正在显示该时间。但是，除非我在detectChanges()实例上调用ChangeDetectorRef，否则更改不会反映在视图中。

这是预期的行为吗？您是否应该在异步功能中更改视图后调用detectChanges()？如果没有，那可能是什么问题？任何帮助表示赞赏。谢谢。

Answer 1

使用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

Answer 2

这很奇怪，在Angular 9中出现了这个问题，但是以前没有问题。

[我唯一的想法是尝试不变地更新a对象和recentAuctions数组，以便它们获得指向它们在内存中位置的新指针，并希望能开始进行更改检测。

尝试：

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

看看是否可行。 .map会将对象数组转换到内存中的新位置，并且散布运算符...auction将对象的先前键/值散布到内存中的新位置，但timeLeft将被覆盖。