时间戳

首页 > 解决方案 > 页面加载时 Angular 10 中的控制台错误

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

问题描述

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

错误错误：找不到类型为“对象”的不同支持对象“[对象对象]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

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

标签： angularprimengangular10primeng-menu

解决方案

根据PrimeNg 的 Mega Menu Documentation，您似乎忘记[]在items.

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

如果您想使用这些样本中的任何一个，您可以选择其中任何一个样本

1.) 超级菜单项

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

推荐阅读