Intento llenar una matriz con valores que provienen de un servicio.
La matriz debe llenar un menú desplegable. Sigo estapublicación .
La matriz se define así: dropdownList: Array<{id: number, description: string}>;
El método de servicio es:
async loadFoodTypes(){ const api: string = environment.apiAddress + 'FoodType'; await this.httpClient.get<FoodType[]>(api) .pipe() .toPromise() .then((response: FoodType[]) => { this._foodType.next(response); }) .catch(err => console.log(err)) }El tipo FoodType se define así:
id?: number; description: string; shortDescription: string;Cuando llamo al servicio, trato de llenar la matriz con datos.
loadFoodTypes(){ this.foodtypesService.loadFoodTypes().then(response => this.dropdownList.push({id: <number>(<unknown>response as FoodType).id, description: (<unknown>response as FoodType).description}) ); }Mi problema es que tengo estos 2 mensajes de error en la consola del navegador:
Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'id')
y
Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'push')
Supongo que el segundo está relacionado con el primero.
Gracias por tu ayuda.
No está devolviendo nada de loadFoodTypes(). Es por eso
this.foodtypesService.loadFoodTypes().then(response =>no funciona Su respuesta es indefinida.
La forma en que es "más angular" sería algo así como
loadFoodTypes(): void { const api: string = environment.apiAddress + 'FoodType'; this.httpClient.get<FoodType[]>(api) .subscribe(response => this._foodType.next(response)) } ... getFoodTypes(): Observable<FoodType[]> { return this._foodType.asObservable(); } loadFoodTypes(){ this.foodtypesService.getFoodTypes() .subscribe(foodTypes => this.dropdownList = foodTypes.map((foodType: FoodType) => ({id: foodType.id, description: foodType.description}) ); }Y no olvides darte de baja de tus observables.
El problema es que no devuelves los datos en la función cargar tipo de comida,
async loadFoodTypes(){ const api: string = environment.apiAddress + 'FoodType'; await this.httpClient.get<FoodType[]>(api) .pipe() .toPromise() .then((response: FoodType[]) => { this._foodType.next(response); return response; }) .catch(err => console.log(err)) } Además, el código en la captura no vuelve a generar el error, por lo que volverá undefined en el siguiente .then
Notas generales sobre su código:
.pipe ya que.toPromise ya que está en desuso