属性 绑定仅在 Angular 中的鼠标操作后运行

Question

我正在创建一个与 Firebase 实时数据库交互的网络应用程序。当特定的数据库值更改时，我正在使用 属性 绑定来更新视图。一切正常，视图实时更新。

现在我更改了数据库逻辑，我需要视图显示特定数据库路径中最后添加的子项的值。所以我改变了组件的服务，让组件逻辑保持不变。现在组件实时接收来自服务的数据，但 属性 绑定仅在鼠标事件（单击、向上滚动...）后更新视图。我检查了组件是否立即接收到值，那么为什么 属性 绑定不再正常工作并且它仅在鼠标输入后更新视图？

组件逻辑：

export class RotazioneVolanteComponent implements OnInit {
   public data;
   constructor(private _service: ComponentService) { }
   ngOnInit(){
      this._service.getValue().subscribe(value => this.data = value);
   }

组件视图：

<h1>Value: {{data}}</h1>
<h1 [textContent]="data" ></h1>

Answer 1

问题是 Angular 没有更新视图，因为更改没有在 NgZone 中完成。 要解决此问题，您只需在构造函数中声明 private ngZone: NgZone 并在以下位置进行更新：

this.ngZone.run( () => {
   // Update variable
});