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

Question

I have an APIService class with the next method:

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

I'm calling this method in component

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

and I have an error on resp.data' - unresolved variable data .

All API responses have 'data' property. The basic response structure from API is 'data' => [...] . How can I solve this problem? I hope I can create some basic type to annotate all API calls.

Answer 1

Try something like this,

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

Answer 2

I've created a separate APIResponse to annotate response data from HTTP and then map data to Recipe[].

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

Interface:

export interface APIResponse {
    data
}