Angular 6 UI 未更新

Question

我有 3 个组件：

c1 包含 c2 和 c3

c2 包含一个复选框。切换复选框时，我会向输出变量触发一个事件。

<input type="checkbox" [checked]="displayAxialMap" (click)="onToggleAxialMap()" />

并在组件中：

onToggleAxialMap() {
    this.displayAxialMap = !this.displayAxialMap;
    this.toggleMap.emit(<Map>{ display: this.displayAxialMap, mapType: MapType.AXIALMAP, loading: true });
}

在 c1 中我有一个名为 displayMap 的 behaviorSubject

<c2 (toggleMap)="displayMap.next($event)"></c2>

在c1中我也将displayMap值传给了c3

<c3 [displayMap]="displayMap"></c3>

ngOnInit() 中的 c3 我这样做：

this.displayMap.subscribe(map => {
   this.loading = map.loading;
   this.drawAxialMapCanvas();
   this.loading = false;
})

this.loading 初始化为 false。

一切正常（因此通过组件传递数据没有问题）。但是 this.drawAxialMapCanvas();是一个需要很长时间才能完成的函数（3-4 秒），我看到了两种行为：

c2 中的复选框仅在 this.drawAxialMapCanvas() 完成时更改为选中。
局部变量"loading" 在 c3 内部（如果我调试代码）正确地从 false 传递到 true 到又假了但是，如果我将该变量放入模板中：

<...*ngIf"loading">正在加载...

它永远不会出现...它只需要最后一个值！

看来我的UI只有在this.drawAxialMapCanvas()完成时才会更新。我做错了什么？

Answer 1

对于 1) 这是正常的，javascript 是单线程所以一切都被 this.drawAxialMapCanvas

阻塞

2) 您尝试显示加载消息，但您遇到了同样的问题，angular 未更新，因为 the.drawAxialMap 未完成并阻塞了线程（4 秒确实很长对于非异步加载）。

您可以先在下一个事件循环中创建 this.drawAxialMap 运行，方法是：

this.displayMap.subscribe(map => {
   this.loading = map.loading;
   setTimeout( () => {
    this.drawAxialMapCanvas();
    this.loading = false;
   )};
});

它会让时间刷新（checkbox, message..）

无论如何你应该对 this.drawAxialMapCanvas(); 做点什么；我从来没有遇到过这种情况，但也许使用工作人员或通过使用 [setTimeout() / setImmediate()] 之类的东西来部分加载，让 UI 有时间管理用户事件等...

Angular 6 UI 未更新

Angular 6 UI not updated

angular2-changedetection

angular

angular6