Angular: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

Meaning

Typical when an API returns { data: [...] } and the template loops over the wrapper object, or a service returns an Observable and you forgot | async. Loop over the array property, or convert an object with keyvalue / Object.values.

Common causes

• API wraps the array in an object ({ items: [...] }) and the template loops the object
• Forgot | async on an Observable
• Property typed any that sometimes holds an object
• Looping over an object with *ngFor instead of the keyvalue pipe
• Paged responses (results, data) not unwrapped

Detailed fix by platform

Code examples

items$ = this.http.get<{ items: Item[] }>('/api/items').pipe(map(r => r.items));
// template: @for (i of items$ | async; track i.id) { ... }

How to diagnose

1. Shape — Array or object in the response?
2. Observable — Missing async?
3. Source — Console.log the bound value

More related errors