从 observable 填充下拉列表答案

【问题标题】：Populate dropdown from observable从 observable 填充下拉列表
【发布时间】：2021-10-22 19:28:15
【问题描述】：

我尝试用一个服务提供的值填充一个数组。

数组必须填充下拉列表。我关注这个post。

数组定义如下： 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')

我认为第二个链接到第一个。

感谢您的帮助。

【问题讨论】：

标签： javascript angular rxjs observable

【解决方案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})
        );
  }

别忘了取消订阅你的 observables。

【讨论】：

【解决方案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

关于您的代码的一般说明：

您可以删除.pipe，因为它
不要使用 .toPromise，因为它已弃用

【讨论】：

你的意思是我需要像这样返回响应？ ` async loadFoodTypesResponse(){ const api: string = environment.apiAddress + 'FoodType'; await this.httpClient.get(api) .subscribe((response: FoodType[]) => { return response }) } `
不，从 subscribe 函数返回不会有任何作用，你可以继续使用 Promise 或使用 PizzaBoy 答案以获得更多 Angular 方式。
我没有错误消息了，但我的下拉列表总是没有填充。我尝试像这样填充它this.foodtypesService.getFoodTypes() .subscribe(foodTypes => this.dropdownList.push({id: <number>(<unknown>foodTypes as FoodType).id, description: (<unknown>foodTypes as FoodType).description}));，但我认为这是错误的。
你尝试过pizzaboy的回答吗？
是的，但 foodTypes 类型与下拉列表类型不同。所以我尝试用他们需要的数据填充下拉列表。 FoodType 是一个数组。你认为需要我返回相同的类型吗？这更难。