tengo este servicio para obtener datos de la API y luego guardarlos en matrices:
export class DataService { constructor(private http: HttpClient) { } readonly baseURL = "https://localhost:44302/api"; books: Book[]; users: User[]; cards: Card[]; postId: number; httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) } getBooks() { return this.http.get(this.baseURL + '/books'); } getCards() { return this.http.get(this.baseURL + '/cards'); } getUsers() { return this.http.get(this.baseURL + '/users'); } getData() { const observableList: Observable<any>[] = []; observableList.push(this.getBooks()); observableList.push(this.getUsers()); observableList.push(this.getCards()); forkJoin(observableList).subscribe(resultList => { this.books = resultList[0] as Book[]; this.users = resultList[1] as User[]; this.cards = resultList[2] as Card[]; }); }en mi componente, ejecuto el método getData e intento consolar. registrar los datos, pero sigue diciendo que los datos no están definidos, aunque los datos de la API aparecen en la pestaña de red de depuración:
export class MainComponent implements OnInit { books: Book[]; users: User[]; cards: Card[]; selectedBook: Book; display: boolean = false; selectedUser: User; constructor(public dataService: DataService) { } ngOnInit() { this.dataService.getData(); //Save data in local component arrays this.books = this.dataService.books; this.users = this.dataService.users; this.cards = this.dataService.cards; console.log(this.books); // ==> "undefined" }Las matrices asignadas dentro del componente (después de la llamada de servicio) ya se ejecutarán antes de que el servicio con getData() complete la suscripción a los tres observables. Es por eso que están asignando a datos indefinidos.
En su servicio, modifíquelo para devolver solo lo observable:
getData() { const observableList: Observable<any>[] = []; observableList.push(this.getBooks()); observableList.push(this.getUsers()); observableList.push(this.getCards()); return forkJoin(observableList); }En su componente, suscríbase a los datos unidos llamando a getDate() dentro de un suscriptor:
this.dataService.getData() .subscribe(({resultOne, resultTwo, resultThree}) => { //Save data in local component arrays this.books = resultOne; this.users = resultTwo; this.cards = resultThree; }); }