停止执行代码，直到我的 async/await HttpClient get 操作完成执行代码（包括 html 调用）

Question

I need to execute HttpClient get request synchronously so I found a solution on internet to use toPromise instead of subscribe and then await. However I have noticed that the this.form = = this.formBuilder.group line of code executes before myAccount is initialized by the async call. In other words I was expecting that the execution code will block until this.myAccount is initialized and then starts executing this.form = this.formBuilder.group line. Am I understanding async/await in javascript correct. What do I need to do to achieve what I want - that is, wait with execution until this.myAccount is initialized by the call await this.accountService.getById(this.id).toPromise() .

ngOnInit(): void {
    this.getByIdSynchronously();

    this.form = this.formBuilder.group({
      scheduledDate: ['', Validators.required],
      required: [''],
      userAvailability: [''],
    });
}
async getByIdSynchronously()
  {
    this.myAccount = await this.accountService.getById(this.id).toPromise();
  }

I also have an html page with the first line of code looking like this:

<form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="!isAdmin">
...
</form >

where isAdmin is a local function:

get isAdmin()
  {
    if(this.myAccount)
    {
      return this.myAccount.role == Role.Admin;
    }
    else{
      return true;
    }
  }

which executes dozen of time before my async/await method finishes so I have to return some artificial true value until my this.myAccount is initialized.

Note

I have found solution to the first problem - just use then operator of the Promise. I can't find the solution for the second problem - to stop isAdmin being called from template html until this.myAccount is initialized. Is there a remedy for that?

Answer 1

Instead of Promises you should use Observables as Angular also encourages the use of Observables. The HTTPClient returns an observable so you can subscribe to it instead.

AccountService

    getById(id: number): Observable<any> {
        return this.httpClient.get(`URL goes here. ID goes into PARAMS`);
    }

Then in your component subscribe to your API call. You can use another variable to stop isAdmin from being called continuously.

isLoaded: boolean = false;
ngOnInit(): void {
      this.accountService.getById(this.id).subscribe(resp=>{
          this.form = this.formBuilder.group({
          scheduledDate: ['', Validators.required],
          required: [''],
          userAvailability: [''] });
          this.isLoaded = true;
      });
}

<form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="isLoaded && !isAdmin">
...
</form>