Set up dynamic menu

Question

I have the following array

I would like to introduce a menu with a dynamic submenu, more or less like this one

I tried to do it that way

<ul class="sidebar-menu" data-widget="tree" *ngIf="menuArray">
        <li class="header">MAIN NAVIGATION</li>

        <ng-container *ngFor="let menu of menuArray ">

            <li *ngIf="menu.submenu; else itemMenu" class="treeview">
              <a href="#">
                <i class="fa {{ menu.logo }}"></i><span>{{ menu.menu }}</span>
                <span class="pull-right-container">
                    <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
            </li>
            <ng-template #itemMenu>
              <li>
                <a href="#">
                    <i class="fa {{ menu.logo }}"></i><span>{{ menu.menu }}</span>                               
                </a>
              </li>   
            </ng-template>
        </ng-container>
 </ul>

But is giving the following message on the console **

core.js:1673 ERROR Error: Error trying to diff '[Object Object]'. Only arrays and iterables are allowed

**

In my component I initialize my array

export class MenuComponent implements OnInit {
  menuArray = []
  constructor(private loginService: LoginService) {

   }

Then I take the data from the bank like this:

 getMenuArray(){
    this.loginService.menu( window.sessionStorage.getItem('id') )
                     .subscribe( menu => {
                       this.menuArray = menu
                       console.log('menu', menu)

                      }) 

  }

Or there’s how I set up the menu on Component.ts and then play on the page?

Answer 1

This error is caused by ngFor expecting an Array and its api is returning an object.

Reference https://stackoverflow.com/questions/38216857/error-trying-to-diff-object-object