页面加载时 Angular 10 中的控制台错误

Question

当我的页面加载（ngOnInit() 方法）时，我正在准备一个如下所示的数组。但是当页面加载时，我在控制台中遇到错误

ERROR 错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到数组等 Iterables。

Angular 早期版本不会发生这种情况。

我正在使用primeng在html上显示数据

如何准备不会出现控制台错误的数组。

提前致谢。

<p-megaMenu [model]="infoItems" (click)="click($event)"></p-megaMenu>

import { MenuItem } from 'primeng/api'

infoItems: MenuItem[];

this.infoItems = [
    { 
       label: 'Configuration Data', 
       icon: 'fa fa-fw icon-configuration', 
       items: [
          { label: 'Preview Configuration'}, { label: 'Configuration label' }
       ] 
    } 
 ];

Answer 1

基于 PrimeNg's Mega Menu Documentation，您似乎忘记在您的 items 中放置一个内部数组 []。

但是，已经注意到，在您的模板上您使用的是 MegaMenuItem，但在您的组件上，您使用的是 MenuItem 类型

如果您想使用其中任何一个，您可以选择其中任何一个示例

1.) MegaMenuItem

<p-megaMenu [model]="infoItems" (click)="click($event)"></p-megaMenu>

infoItems: MegaMenuItem[];

this.infoItems = [
  {
    label: 'Configuration Data',
    icon: 'fa fa-fw icon-configuration',
    items: [ [ { label: 'Preview Configuration'}, { label: 'Configuration label' }  ] ]
  }
];

2.) 菜单项

如果您想使用MenuItem，您不必更改数据中的任何内容，而是更改您的模板：

<p-menu [model]="infoItems" (click)="click($event)"></p-menu>