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的behaviourSubject

<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秒），我看到了兩種策略行為：

1. 僅當this.drawAxialMapCanvas（）完成時，c2中的復選框才更改為選中狀態。
2. c3中的局部變量“ loading”（如果我調試代碼）正確地從false傳遞到true到false。 但是，如果我將該變量放在模板中：

<... * ngIf“ loading”>正在加載...

它永遠不會顯示出來……只需要最后一個值！

看來我的UI僅在this.drawAxialMapCanvas（）完成時才更新。 我做錯了什么？

Answer 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;
   )};
});

它將使時間刷新（復選框，消息..）

無論如何，您應該對this.drawAxialMapCanvas（）;做些什么。 我從未遇到過這種情況，但是也許使用了一個工作程序或通過使用諸如[setTimeout（）/ setImmediate（）]之類的方法來部分加載工作，以便讓UI有時間管理用戶事件等。