从observable中填充下拉列表

Question

我尝试用来自一个服务的值填充数组。

数组必须填充下拉列表。我关注这篇文章。

数组的定义如下:dropdownList: Array<{id: number, description: string}>;

服务方法是:

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))
} 

FoodType类型定义如下:

id?: number;
description: string;
shortDescription: string;

当我调用服务时，我尝试用数据填充数组。

loadFoodTypes(){
this.foodtypesService.loadFoodTypes().then(response => 
this.dropdownList.push({id: <number>(<unknown>response as FoodType).id, description: (<unknown>response as FoodType).description})
);
}

我的问题是，我有这两个错误消息在浏览器控制台:

Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'id')

和

Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'push')

我猜第二个和第一个是相连的。

谢谢你的帮助。

Answer 1

你没有从loadFoodTypes()返回任何东西。这就是为什么

this.foodtypesService.loadFoodTypes().then(response => 

不工作。您的回复没有定义。

这是"更angular"的方式。比如

• 在服务中:

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})
);
}

别忘了取消订阅你的可观察对象。

Answer 2

问题是你没有在load food type函数中返回数据，

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))
} 

此外，catch中的代码不会重新抛出错误，因此它将在下一个.then

中返回undefined。

---

代码的一般注释:

1. 你可以删除.pipe，因为它
2. 不要使用已弃用的.toPromise