角度:找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等可迭代对象

时间:2018-10-30 23:23:45

标签: angular for-loop

在角度上,我在组件中具有以下逻辑:

  menu: Array<object> = [];

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

menu属性获得以下要分解的常量:

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'
            }
        ]
    }
];

在模板中,我只需执行以下操作

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

我无法正常工作,但出现以下错误:“找不到类型为'object'的其他支持对象'[object Object]'。NgFor仅支持绑定到Iterables,例如数组。”您会注意到控制台已在此处登录。

它确实是一个数组。

Array
同样,控制该组件的模块从angular导入CommonModule

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 {}

我很茫然。我真的不明白为什么这么简单的操作失败了。

编辑:我添加了仓库https://github.com/Panglot/DnD_app

1 个答案:

答案 0 :(得分:1)

在其他帮助下,我找到了解决方案。它非常简单,但是我列出的信息丢失了。完整的模板如下所示:

<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>

“菜单”命中<mat-menu #menu="matMenu">而不是属性。简单而愚蠢。