how to remove this error NgFor only supports binding to Iterables such as Arrays

Question

I have a function in my component as

  missionSelected(event){
    this.category = event.option.value.children;
    console.log(this.category);
  }

This console log i am getting as:

    (3) [{…}, {…}, {…}]

But as i am using this variable in my template as:

    <mat-list-option *ngFor="let cat of category" [value]="cat">
        <div>{{cat.name}}</div>
    </mat-list-option>

This one giving me error as:

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

I tried to reinitialize the same object in array variable but i am getting same error. Many ways i tried but not getting proper solution.

Please provide your html code and ts, as the code you have provided, seems to be fine. — Siju Samson
– Siju Samson, Commented Jul 16, 2020 at 11:52
can you elaborate what you got in the console, (3) [{…}, {…}, {…}] may be a mock data would help us to figure out? — Santa
– Santa, Commented Jul 16, 2020 at 12:09
yes {path: "/home/rajesh/geospace/GIS", name: "GIS", children: Array(4), size: 18502537, type: "directory"} children: (4) [{…}, {…}, {…}, {…}] name: "GIS" path: "/home/rajesh/geospace/GIS" size: 18502537 type: "directory" __proto__: Object — Rajesh Kumar
– Rajesh Kumar, Commented Jul 16, 2020 at 12:19

Barremian · Accepted Answer · 2020-07-16 12:28:51Z

2

You either need to check in the template if the array is defined

<ng-container *ngIf="category">
  <mat-list-option *ngFor="let cat of category" [value]="cat">
    <div>{{cat.name}}</div>
  </mat-list-option>
</ng-container>

or initialize the array in the definition.

category: Array<any> = [];

Update: `keyvalue` pipe

I am not sure if you're actually looping through an array. If in any case it's an object, you could use keyvalue pipe with the *ngFor directive.

<mat-list-option *ngFor="let cat of category | keyvalue" [value]="cat.value">
  <div>{{cat.key}}</div>
  <div>{{cat.value}}</div>
</mat-list-option>

edited Jul 16, 2020 at 12:28

answered Jul 16, 2020 at 11:54

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Barremian Over a year ago

From one of your other comments, you say the definition is category: [];. That wrongfully defines the variable to be of type [], not the JS Array. It needs to be category: Array<any>.

Rajesh Kumar Over a year ago

As per your recommendation i changed the definition from category: []; to category: Array<any> = []; but getting same error

Barremian Over a year ago

Please provide a screenshot of your console log. Also please check if it works with the keyvalue pipe as mentioned in the update. If so, they the response is actually an object.

Rajesh Kumar Over a year ago

added screenshots of my console in question section . if i am using keyvalue pipe i am getting another error as ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'. Current value: 'ngForOf: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]'.

Juan Antonio · Accepted Answer · 2020-07-16 11:46:31Z

0

Maybe the problem is the initial value of category. Have you initialized it to [] for example? If the initial value is null or other object *ngFor can't work with it as the message says.

answered Jul 16, 2020 at 11:46

Juan Antonio

2,6634 gold badges28 silver badges42 bronze badges

1 Comment

Rajesh Kumar Over a year ago

yes i have already declare that in my component as category: [];

Rajesh Kumar · Accepted Answer · 2020-07-20 09:16:34Z

0

Thank you so much for all answer but i only was doing the mistake here: in my template i am using reference #category which is same as my category variable as shown below:

<mat-selection-list #category [multiple]="false">           
<mat-list-option *ngFor="let cat of category" [value]="cat.value">
<mat-icon mat-list-icon>folder</mat-icon>             
<div mat-line>{{cat.name}}</div>          
</mat-list-option>
</mat-selection-list>

I just changed that reference name from #category to #reffer and it worked.....

answered Jul 20, 2020 at 9:16

Rajesh Kumar

3131 gold badge4 silver badges18 bronze badges

Collectives™ on Stack Overflow

how to remove this error NgFor only supports binding to Iterables such as Arrays

3 Answers 3

Update: `keyvalue` pipe

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update: keyvalue pipe

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Update: `keyvalue` pipe