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

【问题标题】：Property Binding runs only after mouse action in Angular属性绑定仅在 Angular 中的鼠标操作后运行
【发布时间】：2020-06-06 14:15:20
【问题描述】：

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

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

组件逻辑：

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>

【问题讨论】：

参考：stackoverflow.com/questions/50519200/…

标签： angular typescript property-binding

【解决方案1】：

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

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

【讨论】：