Angular HTTP-订阅提供了未解析的变量

Question

我有一个带有下一个方法的APIService类：

  public getRecipeIndex() : Observable<Recipe[]>
  {
    return this.http.get<Recipe[]>(this.serverURL+'recipes');
  }

我在组件中调用此方法

  ngOnInit() {
    this.api.getRecipeIndex()
        .subscribe(
            resp => this.recipes = resp.data
        );
  }

并且我在resp.data' - unresolved variable data上resp.data' - unresolved variable data 。

所有API响应均具有“数据”属性。 API的基本响应结构是'data' => [...] 。 我怎么解决这个问题？ 我希望我可以创建一些基本类型来注释所有API调用。

Answer 1

试试这个

 ngOnInit() {
        this.api.getRecipeIndex()
            .subscribe(resp=>{    
               this.recipes = resp;
               });
            }

Answer 2

我创建了一个单独的APIResponse来注释来自HTTP的响应数据，然后将数据映射到Recipe []。

  public getRecipeIndex() : Observable<Recipe[]>
  {
    return this.http.get<APIResponse>(this.serverURL+'recipes')
        .pipe(
            map(response => response.data)
        );
  }

接口：

export interface APIResponse {
    data
}