Почему пользовательский интерфейс не обновляется после завершения асинхронного вызова? ⇐ Javascript

[Anonymous]

Я пытаюсь отобразить индикатор загрузки во время выполнения асинхронного запроса, но пользовательский интерфейс не обновляется, пока я вручную не взаимодействую со страницей (например, не щелкаю случайный элемент).
Журналы консоли показывают, что переменная загрузки обновляется правильно, но представление не отражает эти изменения.
Я также пробовал обертывать обновления в NgZone.run(), но поведение не изменилось, т. е. пользовательский интерфейс не обновляется до тех пор, пока нажимается что-то еще.
signup.ts

Код: Выделить всё

import {  NgZone,  ChangeDetectorRef,  Component,  ElementRef,  ViewChild,  HostListener,
} from '@angular/core';

import { User } from '../../../db_models/user';
import { AuthService } from '../../../services/auth-service';
import { RouterLink } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { MatProgressBarModule } from '@angular/material/progress-bar';
@Component({
selector: 'app-signup',
imports: [ReactiveFormsModule, AsyncPipe, RouterLink, MatProgressBarModule],
templateUrl: './signup.html',
styleUrl: './signup.scss',
})
export class Signup {
@ViewChild('searchInput') searchInputRef!: ElementRef;
@ViewChild('phoneInput') phoneInputRef!: ElementRef;
constructor(
private authServ: AuthService,
private cd: ChangeDetectorRef,
private _ngZone: NgZone,
) { }

loading = false;

async onSubmit() {
if (this.form.invalid) {
this.markAlltouched(this.form);
return;
} else {

this.loading = true; //should trigger loading ui event
this.cd.detectChanges();

setTimeout(async () => {
try {
const email = this.form.get("email")!.value ?? "";

if (await this.validEmail(email)) {
console.log("exists");
} else {
await this.nextStep(); //should show component for next step
}
} catch (error) {
console.error('Error:', error);
} finally {
this.loading = false; //should hide the loading component
this.cd.detectChanges();
} }, 0);

signup.html:

Код: Выделить всё

  @if(loading){

}

Код: Выделить всё

Create Account

Индикатор загрузки сначала отображается правильно, но не исчезает после завершения асинхронного запроса, даже если консоль подтверждает, что для загрузки установлено значение false. Он скрывается только тогда, когда я вручную взаимодействую со страницей, например, щелкаю в любом месте, что ясно указывает на проблему обнаружения изменений в Angular, но даже вызов cd.detectChanges() не решает ее.
Ожидаемое поведение: индикатор выполнения должен появляться во время работы асинхронной функции и исчезать после ее завершения, не требуя какого-либо ручного взаимодействия.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -completes