Пользовательский интерфейс Angular 6 не обновляется

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

<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 секунды), и я вижу два странных поведения:

1. флажок в c2 меняется на флажок только после завершения this.drawAxialMapCanvas ().
2. локальная переменная «загрузка» внутри c3 (если я отлаживаю код) корректно переходит от false, к true снова в false.Но если я добавлю эту переменную в шаблон:

<... * ngIf "loading"> Загрузка ...

Она никогда не появляется ... Она занимает толькоПоследнее значение!

Кажется, что мой интерфейс обновляется только после завершения this.drawAxialMapCanvas ().Что я делаю не так?

Answer 1

Для 1) это нормально, javascript является однопоточным, поэтому все просто блокируется этим .drawAxialMapCanvas

2) Вы пытаетесь показать сообщение о загрузке, но у вас есть та же проблема, angular не обновляетсяпоскольку the.drawAxialMap не завершает работу и не блокирует поток (4 секунды очень долго для не асинхронной загрузки).

Сначала вы можете запустить this.drawAxialMap в следующем цикле событий, выполнив:

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

Время обновления (флажок, сообщение ..)

В любом случае, вы должны что-то сделать с этим.drawAxialMapCanvas ();Я никогда не сталкивался с такой ситуацией, но, возможно, использую рабочий или загрузку по частям, используя что-то вроде [setTimeout () / setImmediate ()], чтобы дать пользовательскому интерфейсу время для управления пользовательскими событиями и т. Д. *