angular - Angular:找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables,例如 Arrays
问题描述
在角度上,我在组件中有以下逻辑:
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 {}
我很茫然。我真的不明白为什么这么简单的操作会失败。
编辑:我添加了回购https://github.com/Panglot/DnD_app
解决方案
在其他帮助下,我找到了解决方案。它非常简单,但是我列出的信息中缺少信息。完整的模板如下:
<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">
而不是属性。正如预期的那样简单而愚蠢。
推荐阅读
- javascript - 根目录外的电子文件
- android - 在列表视图中更改所选项目的文本颜色(Kotlin,Android)
- flutter - Flutter避免重新打开抽屉页面
- linux - 如何在运行时使用 python 传递存储桶和本地文件夹值时将所有文件从 s3 存储桶下载到本地 linux 服务器
- google-sheets - 如何获得对将动态更新的单元格范围的静态引用?
- wpf - 我需要使用存储在 .resx 文件中的预翻译单词,按下按钮更新应用程序以提供法语版本
- c# - 为什么在保存视图页面并刷新浏览器后调试站点时出现 500 内部服务器错误?
- c# - 带有 TX 的实时 ETW
- xcode - 模块未编译用于测试 @testable 导入错误
- sas - 如何计算每年的观测值