Estoy tratando de suscribirme a un Observable y asignar algunos datos de la respuesta, pero de alguna manera mi código no está esperando la respuesta. Básicamente, el archivo console.log (this.newIds) se ejecuta primero y siempre está vacío porque la suscripción no espera que la respuesta provenga del backend. ¿Cómo puedo obligar a mi código a esperar a que llegue la respuesta?
this.repository.getById(Ids).subscribe((response) => { console.log(response); this.newIds = response.map((id) => { return id; }); }); console.log(this.newIds);Puedes hacer así..
su archivo de componente como a continuación
newIds: Observable<any> = of(this.id).pipe( concatMap((id) => this.getId(id).pipe(map((data) => data.map((rowId) => rowId.id))) ) ); getId(id: any) { return of([{ id: 1 }, { id: 2 }, { id: 3 }]); }su archivo html como se muestra a continuación, y use la canalización asíncrona para la suscripción. aquí puede usar el operador concateMap pipe rxjs para llamar secuencialmente observable y luego asignar valor a su variable newId.
<pre> {{ newIds | async }} </pre>Demostración en este enlace en vivo Stackblitz Link
Si pones el código en la devolución de llamada de suscripción. Se ejecutará después de recibir una respuesta del back-end. Todo el código que escriba fuera de esta función se ejecuta directamente.
this.repository.getById(Ids).subscribe((response) => { //Code will execute when back-end will respond console.log(response); this.newIds = response.map((id) => { return id; }); console.log(this.newIds); }); //Code will execute immediatelyVer también: https://angular.io/guide/observables#creating-observables
Este es el comportamiento normal porque su console.log(this.newIds); está fuera de la suscripción, solo necesita moverlo dentro del método .subscribe():
this.repository.getById(Ids).subscribe((response) => { console.log(response); this.newIds = response.map((id) => { return id; }); console.log(this.newIds); });si desea usar this.newIds fuera de la suscripción e inmediatamente después del resultado del observador, puede usar RxJs .toPromise() para usarlo como una promesa y cambiar el método a asíncrono:
async callerFn(){ const response = await this.repository.getById(Ids).toPromise(); this.newIds = response.map((id) => { return id; }); console.log(this.newIds); // use your property here }