Usando angular 2+: he declarado una propiedad pública que espero que se complete con un objeto de datos de promesa, usando el método de ciclo de vida "ngOnInit" para enviar una solicitud http a mi API.
en el bloque de suscripción, estoy asignando la propiedad a los datos recibidos del observable, pero luego quiero registrar esta propiedad, aparece como indefinida fuera de la suscripción pero no indefinida dentro del bloque de suscripción, lo cual es un comportamiento extraño (¿me estoy perdiendo algo?) código a continuación :
async ngOnInit(): Promise<any> { console.log(this.indexID); const elements = document.getElementsByClassName('footer-wrap'); while (elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } await this.landingService.getLandingDataById(this.indexID) .subscribe((res:any) => { this.landingData = res['data'][0]; }); console.log(this.landingData); }await this.landingService.getLandingDataById(this.indexID) .subscribe((res:any) => { this.landingData = res['data'][0]; }); no tiene sentido .subscribe devuelve una suscripción. No puedes esperarlo. No puede esperar un observable, porque puede activarse varias veces, pero puede convertir un observable en una promesa, por ejemplo, con firstValueFrom
async ngOnInit(): Promise<void> { console.log(this.indexID); const elements = document.getElementsByClassName('footer-wrap'); while (elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } const res = await firstValueFrom(this.landingService.getLandingDataById(this.indexID)); this.landingData = res['data'][0]; console.log(this.landingData); }aparece como indefinido fuera de la suscripción pero no indefinido dentro del bloque de suscripción, lo que es un comportamiento extraño
Eso no es extraño. Ese es el comportamiento esperado. this.landingData = res['data'][0]; se ejecuta después de console.log(this.landingData); . this.landingService.getLandingDataById(this.indexID) devuelve un observable asíncrono. Puede eliminar async / await y mover console.log al observador:
ngOnInit(): void { console.log(this.indexID); const elements = document.getElementsByClassName('footer-wrap'); while (elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } this.landingService.getLandingDataById(this.indexID) .subscribe((res:any) => { this.landingData = res['data'][0]; console.log(this.landingData); }); }TypeScript son funciones asincrónicas, lo que significa que TypeScript no esperará a que finalice una función antes de ejecutar el código debajo de ella. En el siguiente código, primero ejecute el segundo registro y luego ejecute el primer registro. por lo que no obtendrá los datos de retorno en el registro
async ngOnInit(): Promise<any> { await this.landingService.getLandingDataById(this.indexID) .subscribe((res:any) => { this.landingData = res['data'][0]; console.log('data'); }); console.log(this.landingData); }Prueba esto funcionará
ngOnInit(): void { this.landingService.getLandingDataById(this.indexID) .subscribe((res:any) => { this.landingData = res['data'][0]; console.log(this.landingData); }); }