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  * 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

CodePudding user response：

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  * 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

CodePudding user response：

There is nothing wrong with for loop (just data?.colorways). Error is occurring due to the wrong interface. The interface is missing few items for Colorway.

export interface Colorway {
  thumbnail: string[];
  thumbnailWithAvatar: string[];
  patternLayoutThumbnailWithFabricMark: string;
  thumbnailWithFabricMark: string[];
  thumbnailPattern: string[];
  thumbnailWithTrimMark: string[];
  patternLayoutThumbnailWithTrimMark: string;
  name: string;
  id: number;
  uuid: string;
}

and data will be

data: Pokedex

But you have assigned it as array. Check this out https://stackblitz.com/edit/angular-ivy-rfqs1z?file=src/app/app.component.ts