Angular：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays答案

【问题标题】：Angular: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as ArraysAngular：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays
【发布时间】：2026-02-14 02:10:02
【问题描述】：

在 Angular 中，我在组件中有以下逻辑：

  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，例如数组。”您可以在上面看到控制台日志。

确实是一个数组。

管理该组件的模块也从 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 {}

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

编辑：我添加了 repo https://github.com/Panglot/DnD_app

【问题讨论】：

可能是因为你在初始化menu时没有定义name和path。这就是在渲染 DOM 时，菜单中没有值，因此会引发错误的原因。只需将其定义为menu=[ {name:" ", path:" "}]，{name:"",path:""} 将重复预期获得值的次数。
不，这没有帮助。这没有意义。您应该能够尝试迭代空数组。只是长度为 0 而你没有，但是一旦它填充了数据，它应该正常迭代。这里它说它显然不是数组。

标签： angular for-loop

【解决方案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"> 而不是属性。正如预期的那样简单而愚蠢。

【讨论】：