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

Question

In angular I have the following logic in a component:

  menu: Array<object> = [];

  ngOnInit() {
    this.menu.push(
      ...HomeMenu,
      ...QuickReferenceMenu
      );
    console.log(this.menu);
  }

The menu property gets the following constants that it destructures:

export const HomeMenu: Array<object> = [
      { path: '', name: 'Home', direct: true }
];


export const QuickReferenceMenu: Array<object> = [
    {
        path: 'quck-reference',
        name: 'Quick Reference',
        children: [
            {
                path: 'combat',
                name: 'Combat'
            }
        ]
    }
];

and in a template I just do the following

<div *ngFor="let item of menu">
asd
</div>

Instead of working properly I get the following error: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." You can notice the console log up there.

It is indeed an array.

Also the module governing this component imports CommonModule from angular

import { NgModule } from '@angular/core';
import { NavigationComponent } from './navigation.component';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { CommonModule } from '@angular/common';

@NgModule({
    declarations: [ NavigationComponent ],
    imports: [ MatMenuModule, MatButtonModule, CommonModule ],
    exports: [ NavigationComponent ]

})
export class NavigationModule {}

I am at a loss. I really dont understand why such a simple operation is failing.

Edit: Im adding the repo https://github.com/Panglot/DnD_app

It's probably because you have not defined name and path in the menu when it is initialised. That's the reason when it is rendering the DOM, there is no value present in menu and so it throws the error. just define it as menu=[ {name:" ", path:" "}] the {name:"",path:""} will repeat for the number of times it is expected to get a value. — Richard Pariath
Nope this doesnt help. It doesnt make sense. You should be able to try and iterate empty array. Just the length is 0 and you dont, but as soon as it fills with data it should iterate normally. Here it says that its not an array when it obviously is. — SkyLordPanglot

SkyLordPanglot SkyLordPanglot · Accepted Answer · 2018-11-01T18:56:27

With other help I found the solution. Its quite simple, but the info is missing from what I listed. The full template is as it follows:

<button mat-button [matMenuTriggerFor]="home" (mouseenter)="openMenu()">Home</button>
<mat-menu #home="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="menu">Item 1 h</button>
  <button mat-menu-item>Item 2 h</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1 m</button>
  <button mat-menu-item>Item 2 m</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="quickReference">QuickRef</button>
<mat-menu #quickReference="matMenu">
  <button mat-menu-item>Item 1 qrf</button>
  <button mat-menu-item>Item 2 qrf</button>
</mat-menu>
<div *ngFor="let item of menu">
loop 
</div>

'menu' hits <mat-menu #menu="matMenu"> instead of the property. Simple and stupid as expected.

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

1 Answers