Angular: NgFor only supports binding to Iterables such as Arrays

Question

I have data like this received from the server:

{
    7281: [//post id
        {
            tags: [
                {
                    name: 'name',
                    link: 'link'
                },
                {
                    name: 'name',
                    link: 'link'
                }
            ]
        }
    ]
}

The postlist.ts file declares a property:

private postlists: Observable<any>;

And the method for getting json:

loadData() {
var
    url: string = '...';

    this.http.get<any>(url)
    .subscribe(
        data => {
            this.postlists = data;
        },
        error => {
            console.log(error);
        }
    );

}

In the template file - the output of the received object:

<div sino-item *ngFor="let post of postlists">
    <div *ngFor="let data of post">
        <div *ngFor="let tag of data.tags">
            <p><a href="{{tag.link}}">{{tag.name}}</a></p>
        </div>
    </div>
</div>

I have an error like this:

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

What am I doing wrong?

I made corrections, but now, when building, ionic throws the following error:

ERROR in src/app/postlist/postlist.page.html:7:78 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'Observable<any>' is not assignable to parameter of type 'Map<unknown, unknown>'.
      Type 'Observable<any>' is missing the following properties from type 'Map<unknown, unknown>': clear, delete, get, has, and 7 more.

7   <div *ngFor="let post of postlists | keyvalue">
                                                                               ~~~~~~~~~

  src/app/postlist/postlist.page.ts:8:16
    8   templateUrl: './postlist.page.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PostlistPage.

[ERROR] An error occurred while running subprocess ng.

Try to add after : this.postlists = data; console.log(postlists); did you see the array on the console ? — Pluto
If your data is the object you show in your question, that's not an array or anything other that provides an iterator. You must pass in something iterable — derpirscher

Andrei Andrei · Accepted Answer · 2020-10-24T09:36:23

the outer data item is object. you should pass arrays to ngFor. there is a keyvalue pipe in angular that can help to convert object to "array" of keys + values. here is a fix of the question code with keyvalue pipe

<div sino-item *ngFor="let post of postlists | keyvalue">
    <div *ngFor="let data of post.value">
        <div *ngFor="let tag of data.tags">
            <p><a href="{{tag.link}}">{{tag.name}}</a></p>
        </div>
    </div>
</div>

Angular: NgFor only supports binding to Iterables such as Arrays

1 Answers