Angular: 'Cannot Find A Differ Supporting Object '[object Object]' Of Type 'object'. NgFor Only Supports Binding To Iterables Such As Arrays'

Answer :

As the error messages stated, ngFor only supports Iterables such as Array, so you cannot use it for Object.

change

private extractData(res: Response) {   let body = <Afdelingen[]>res.json();   return body || {};       // here you are return an object } 

to

private extractData(res: Response) {   let body = <Afdelingen[]>res.json().afdelingen;    // return array from json file   return body || [];     // also return empty array if there is no data } 

Remember to pipe Observables to async, like *ngFor item of items$ | async, where you are trying to *ngFor item of items$ where items$ is obviously an Observable because you notated it with the $ similar to items$: Observable<IValuePair>, and your assignment may be something like this.items$ = this.someDataService.someMethod<IValuePair>() which returns an Observable of type T.

Adding to this... I believe I have used notation like *ngFor item of (items$ | async)?.someProperty

You only need the async pipe:

<li *ngFor="let afd of afdeling | async">     {{afd.patientid}} </li> 

always use the async pipe when dealing with Observables directly without explicitly unsubscribe.