0
195
Viewsobservable indefinido en arquitectura de fachada con rxjs
(Siguiendo la sugerencia de gunnar, estoy editando mi pregunta) @Gunnar.B
Servicio para conexión con api
@Injectable({ providedIn: 'root' }) export class ConsolidadoApi { constructor(private http: HttpClient) { } getInvestiments(search?: any): Observable<any> { return this.http.get<any>(`${environment.basePosicaoConsolidada}`); } }Este servicio (capa) expone los flujos de estado y la interfaz para los componentes en la capa de presentación (componente)
@Injectable({ providedIn: 'root' }) export class CoreService { constructor(private api: ConsolidadoApi, private state: StateService) { } public getInvestments$(): Observable<any> { return this.state.getInvestiments$() } public loadInvestments() { return this.api.getInvestiments() .pipe( tap(investPortifolio => this.state.setInvestments(investPortifolio)) ); } }Este servicio es responsable de la lógica que irá al componente.
@Injectable({ providedIn: 'root' }) export class StateService { private investments$ = new BehaviorSubject<any>(null); public getInvestiments$() { return this.investments$.asObservable() } public setInvestments(investPortifolio){ this.investments$.next(investPortifolio) } }Sin embargo en mi html no aparecen los datos provenientes de la api.
menu.component.ts
export class MenuComponent implements OnInit { investments$: Observable<any>; constructor( private coreService : CoreService ) { this.investments$ = this.coreService.getInvestments$() } ngOnInit(): void { this.coreService.loadInvestments(); console.log(this.coreService.loadInvestments()) } }menú.componente.html
<div> test </div> <div *ngFor="let investimentPortifolio of investments$ | async;"> {{investimentPortifolio | json}} </div> 
1 answers
Answer question0
El método listInvestments está realizando una llamada a la API asíncrona. Entonces, básicamente, la propiedad de inversión aún no está definida cuando llamó a cada uno.
Desea realizar un bucle en la matriz de inversiones después de cargar datos desde el servidor, no antes.
Una forma de hacerlo es asegurarse de que está dentro de la devolución de llamada next() de subscribe y allí está seguro de que tiene los datos que necesita para realizar su acción.
La clase CoreService se convierte en:
@Injectable({ providedIn: 'root' }) export class CoreService { public investments: any; constructor(private api: ConsolidadoApi, private state: StateService) {} public createMenu(){ this.api.getInvestments() .subscribe(response => { this.investments = response; this.investments.forEach(element => { console.log(element) }); }) } }Actualización sobre la edición de preguntas
En ngOnInit llamaste a loadInvestments() que devuelve un observable. Y los observables son perezosos, eso significa que si no llamaste para suscribirte, no pasará nada.
Lo que tienes que hacer es cambiar esta línea:
this.coreService.loadInvestments();a
this.coreService.loadInvestments().subscribe();