自从更新到Angular 9以来,我一直遇到一些问题。例如,以下代码过去对我来说运行良好:
this.countdownSubscription = interval(1000).subscribe(() => {
this.recentAuctions.forEach(a => {
a.timeLeft = this.auctionService.getTimeLeft(a);
});
});
因此,在此订阅中,我正在更改timeLeft
对象上的auction
。在HTML中,我正在显示该时间。但是,除非我在detectChanges()
实例上调用ChangeDetectorRef
,否则更改不会反映在视图中。
这是预期的行为吗?您是否应该在异步功能中更改视图后调用detectChanges()
?如果没有,那可能是什么问题?任何帮助表示赞赏。谢谢。
使用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
这很奇怪,在Angular 9中出现了这个问题,但是以前没有问题。
[我唯一的想法是尝试不变地更新a
对象和recentAuctions
数组,以便它们获得指向它们在内存中位置的新指针,并希望能开始进行更改检测。
尝试:
this.countdownSubscription = interval(1000).subscribe(() => {
this.recentAuctions = this.recentAuctions.map(auction => ({
...auction,
timeLeft: this.autctionService.getTimeLeft(auction),
}));
});
看看是否可行。 .map
会将对象数组转换到内存中的新位置,并且散布运算符...auction
将对象的先前键/值散布到内存中的新位置,但timeLeft
将被覆盖。