CODEWITHSUNDEEP
angularfor-loop
SkyLordPanglot
SkyLordPanglot

Reputation: 73

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

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.

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

Upvotes: 0

Views: 620

Answers (1)

SkyLordPanglot
SkyLordPanglot

Reputation: 73

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.

Upvotes: 1

Related Questions