Angular ngFor is not available for my object

Question

I have an Ionic app with Angular and want to iterate through an array of objects that I get from an API.

When I log sale.waver (waver contains the array) to my console I get l my infos but when I try to use *ngFor I get an error. I use sale? because the app has to first get the data from the API and until then sale.waver is not defined.

<ion-item *ngFor="let eintrag of sale?.waver">
  xxx       
</ion-item>

This is the log of sale.waver and the error from the *ngFor.

Kirill Simonov · Answer 1 · 2021-02-01T19:29:01.720

3

Your sale.waver is not an array, it's an object (even though it has numbered keys). As the error says, *ngFor only works with Iterables.

You could change the type of sale.waver to array or try to make it iterable by adding a [Symbol.iterator] property to it (see this link).

edited Feb 01 '21 at 19:29

answered Jan 10 '21 at 22:37

Kirill Simonov

8,257
3
18
42

1

Thanks, this info got me on the right track and I found this, which solved the problem: https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor – almo Jan 10 '21 at 23:10

score 0 · Answer 2 · answered Jan 30 '21 at 03:01

You can check if the item is there or not first and then add the condition. Something like this

// Assuming sale.waver is an array. Otherwise the answer provided by Kirill holds good here

<ng-container *ngIf="sale && sale.waver">
  <ion-item *ngFor="let eintrag of sale?.waver">
     xxx       
  </ion-item>
</ng-container>

// 1) You need ng-container because you cant use *ngIf and *ngFor on the same tag
// 2) The ion-item tag will render only if sale and sale.waver are present.

Angular ngFor is not available for my object

2 Answers2