Necesito ejecutar HttpClient get request sincrónicamente, así que encontré una solución en Internet para usar toPromise en lugar de suscribirme y luego esperar. Sin embargo, he notado que la línea de código this.form = = this.formBuilder.group se ejecuta antes de que myAccount sea inicializado por la llamada async . En otras palabras, esperaba que el código de ejecución se bloqueara hasta que se inicialice this.myAccount y luego comience a ejecutar this.form = this.formBuilder.group line. ¿Estoy entendiendo async/await en javascript correctamente? ¿Qué debo hacer para lograr lo que quiero? Es decir, esperar con la ejecución hasta que this.myAccount se inicialice con la llamada 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(); }También tengo una página html con la primera línea de código que se ve así:
<form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="!isAdmin"> ... </form >donde isAdmin es una función local:
get isAdmin() { if(this.myAccount) { return this.myAccount.role == Role.Admin; } else{ return true; } } que se ejecuta una docena de veces antes de que finalice mi método async/await, por lo que tengo que devolver un valor verdadero artificial hasta que se inicialice this.myAccount .
Nota
Encontré la solución al primer problema: solo use then operador de Promise. No puedo encontrar la solución para el segundo problema: evitar que se llame a isAdmin desde la plantilla html hasta que se inicialice this.myAccount . ¿Hay un remedio para eso?
En lugar de Promesas, debe usar Observables, ya que Angular también fomenta el uso de Observables. HTTPClient devuelve un observable para que pueda suscribirse a él en su lugar.
Servicio de cuenta
getById(id: number): Observable<any> { return this.httpClient.get(`URL goes here. ID goes into PARAMS`); }Luego, en su componente, suscríbase a su llamada API. Puede usar otra variable para evitar que se llame continuamente a isAdmin.
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>