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

Question

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

错误错误：找不到类型为 '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>

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

Console error in Angular 10 when page loads

primeng

angular

angular10

primeng-menu