Angular displaying Observable Array

I have an API (Node.js) and an Angular frontend.

Now I want to loop through the data and display it. Therefore I perform an HTTP Request to the backend and get back an Observable which i then want to display on the screen.

The code to display:

<ng-container *ngFor="let p of plans$ | async">
<a [routerLink]="['/plan', p.id]">

<div class="plan" style="margin-bottom: 10px;">
<div class="row">
<div class="col-md-2">
<img [src]="p.image" style="margin: 5px;"/>
</div>
<div class="col-md-10" style="padding-top: 5px;">
<div class="title">{{ p.name }}</div>
<div class="description">{{ p.description }}</div>
<div class="description">Übungen: {{ p.exercises }}</div>
</div>
</div>
</div>
</a>
</ng-container>


The corresponding service:

fetchAll(): Observable<Plan[]> {
return this.http
.get<Plan[]>(this.url, { responseType: "json" })
.pipe(
catchError(this.errorHandlerService.handleError<Plan[]>("fetchAll"))
);
}


But somehow I get the following error:

ERROR RuntimeError: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe? Find more at


What am I missing?

Continue reading...