从 json api angular 获取对象中的对象不显示

Question

I want to get images from an api , but I don't know how to structure my code to access the exact object inside object.

Api: http://api.tvmaze.com/shows

My interface look like this:

export interface MovieModel {
    id: number;
    name: string;
    summary: string;
    images: Images[];
    type: string;
    status: string;
    url: string;
    genres: { [key: string]: Genres};
}

export interface Images{
  medium: string;
  original: string;
}

export interface Genres{
  g: string[];
}

And I call the api here:

 this.http.get(this.apiKey).subscribe((data: MovieModel[]) =>{   
      console.log(data);
      this.Movies = data;

And in my HTML:

          <ion-card-title>
          {{movie.name}}
          </ion-card-title>
          <ion-img src="{{movie.images}}"></ion-img>

Any suggestions for getting images? thanks

Answer 1

I've found the solution. I changed interface to this:

   image: { [key: string]: Images};

And in HTML i use the key of the desired string:

   <ion-img src="{{movie.image.medium}}"></ion-img>