找不到类型为“object”的不同支持对象“[object Object]”。 - 上下文菜单问题

Question

I have issues with context menu. I am not sure why, I made similar thing many times but now I am unable to pass it. When I deleted this line:

<div *ngFor="let element of contextMenu">
</div>

Context menu works fine (but I need this line to fill my context menu. This is part of html:

<mat-menu #contextMenu="matMenu">
    <ng-template matMenuContent>
    <div *ngFor="let element of contextMenu">
    </div>
    </ng-template>
</mat-menu>

And my context menu object:

  @Input() contextMenu: MenuElement[];

And html with filled input:

  <lib-mp-file-explorer
          [fileElements]="fileElements | async"
          [path]="currentPath"
          [canNavigateUp]="canNavigateUp"
          [topMenu]="topMenu"
          [contextMenu]="contextMenu"
          (folderAdded)="addFolder($event)"
          (elementRemoved)="removeElement($event)"
          (navigatedDown)="navigateToFolder($event)"
          (navigatedUp)="navigateUp()"
          (elementRenamed)="renameElement($event)"
          (elementMoved)="moveElement($event)"
        >
  </lib-mp-file-explorer>

And my construction:

this.contextMenu = [
      {
        name: 'Open in Mark',
        icon: 'M',
        action: undefined,
        disabled: true
      }, 
      ...
]

I hate this error now:

core.js:5828 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

But my array is iterable TT

Answer 1

Your menu reference variable has the same name..

<mat-menu #contextMenu="matMenu">

..as the array you are trying to loop through

<div *ngFor="let element of contextMenu">

A template reference variable is not iterable.

Try renaming your array:

<div *ngFor="let element of menuElements">

And Input() :

@Input() menuElements: MenuElement[];

and then

this.menuElements = [
 // your data
]

Answer 2

You can check what there are actual values in your contextMenu :

<p>contextMenu {{ contextMenu | json }}

However, your error says that it is object, so you can use keyvalue pipe since Angular 6:

<div *ngFor="let item of contextMenu | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>