Angular 6 UI 未更新答案

【问题标题】：Angular 6 UI not updatedAngular 6 UI 未更新
【发布时间】：2019-02-23 18:44:42
【问题描述】：

我有 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>

c3 在 ngOnInit() 我这样做：

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

this.loading 被初始化为 false。

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

仅当 this.drawAxialMapCanvas() 完成时，c2 中的复选框才会变为选中状态。
局部变量“正在加载” 在 c3 内部（如果我调试代码）正确地从 false 传递到 true 到又是假的。但是，如果我将该变量放入模板中：

<...>加载中...

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

似乎我的 UI 仅在 this.drawAxialMapCanvas() 完成时才更新。我做错了什么？

【问题讨论】：

你能创建一个stackbliz吗

标签： angular angular6 angular2-changedetection

【解决方案1】：

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

2）您尝试显示加载消息，但您在这里遇到了同样的问题，角度没有更新，因为 the.drawAxialMap 没有完成并阻塞线程（对于非异步加载来说，4 秒真的很长）。

您可以首先让 this.drawAxialMap 在下一个事件循环中运行：

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

它会让时间刷新（复选框，消息..）

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

【讨论】：