What is the proper way doing *ngfor?

Issue

Hi Could someone tell me how to do *ngFor properly?

Error:

Type '{ colorways: { thumbnail: string[]; thumbnailWithAvatar: string[]; patternLayoutThumbnailWithFabricMark: string; name: string; thumbnailWithFabricMark: string[]; thumbnailPattern: string[];

export interface Pokedex {
  colorways: Colorway[];
  count: number;
}

export interface Colorway {
  thumbnail: string[];
  name: string;
  id: number;
  uuid: string;
}

html

<div class="item-list" * ngFor="let item of imgSource?.colorways">
  {{ item.thumbnail[0] }}
</div>

Stackblitz - repro

I'm trying to bind only 0th index of thumbnail[0] and name from API response.

Thanks all

Solution

I think that you've put the wrong variable here, your 'item' array is empty but you're trying to iterate on it. If you switch with 'data' constant which has your data, it works fine :

<div class="item-list" * ngFor="let item of data.colorways">
  {{ item.thumbnail[0] }}
</div>

Note: There was wrong interfaces issues in the code, I've updated it in your Stackblitz.

Cheers

Answered By - l -_- l