Primeng affected by "Error: Cannot find a differ supporting object"

Question

我想使用 primeng 的 megamenu 组件，但无法让它工作，每次我加载项目时，当它要显示菜单时，它只显示第一个没有文字的图标，仅此而已，直到我通过菜单 space 使其只显示第一行并且在控制台中我总是看到相同的错误：

ERROR (ng:///MegaMenuModule/MegaMenu.ngfactory.js:184) Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

megamenu 组件依赖于包含菜单定义的 un 数组：https://www.primefaces.org/primeng/#/megamenu

我寻找不同的文档

1. https://github.com/angular/angular/issues/6392

3. p-menu not showing up

（和很多其他人）所以最后我推断错误与 angular 中管理数组数组的错误有关

我的代码：

/* -------- app.module.ts----------- */ 

import { NgModule, Provider } from '@angular/core';
import { ModuleWithProviders} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes} from '@angular/router';
import { APP_BASE_HREF} from '@angular/common';

import {ConfirmationService, ConfirmDialogModule, Menu, MenuItem} from 'primeng/primeng';
import {PanelModule} from 'primeng/primeng';
import {MenuModule, MegaMenuModule} from 'primeng/primeng';


import { AppComponent } from './app.component';
import { StatisticComponent } from './statistic/statistic.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SettingsComponent } from './settings/settings.component';

const appRouter: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: '**', component: PageNotFoundComponent },
  { path: 'settings', component: SettingsComponent},
];

@NgModule({
  declarations: [
  AppComponent,
  SettingsComponent,
  StatisticComponent,
  DashboardComponent,
  ],
  imports: [
  BrowserModule,
  PanelModule,
  HttpModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRouter),
  MenuModule,
  MegaMenuModule
  ],
  exports: [
    RouterModule
  ],
  providers: [{provide: APP_BASE_HREF, useValue: '/'}],
  bootstrap: [AppComponent]
})

export class AppModule {}



/*---------app.component.ts------- */

import {Component, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

import {Menu} from 'primeng/components/menu/menu';

import {MenuItem} from 'primeng/primeng';
import {MegaMenuModule, MenuModule } from 'primeng/primeng';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit   {

  contenidoMenu: MenuItem[];

  constructor() {
    this.contenidoMenu = [
     { label: 'Documentos', icon: 'fa-file-text',
       items: [
          {label: 'edición y búsqueda', icon: 'fa-pencil', routerLink: ['/dashboard']},
          {label: 'movimientos', icon: 'fa-exchange', command: (event) => { console.log('movmitns', event); } }
     ]},
      { label: 'Reportes', icon: 'fa-list-alt'
      },
      { label: 'Sistema', icon: 'fa-wrench'
      },
      { label: 'Salir', icon: 'fa-sign-out'
      }
     ];

}



/* -------- app.component.html----------- */ 

<div class="ui-g ui-g-nopad" id="header">
  <div class="ui-sm-12 ui-md-3 ui-g-2">
    <div class="ui-sm12 " id="#top-logo">
      espacio para el  logo y notificaciones
    </div>
    <div class="ui-sm12" id="notifications">
      espacio para notificaciones
    </div>
  </div>

  <div class="ui-sm-12 ui-md-9 ui-g-10">
    <div class="ui-sm12">
      <p-megaMenu [model]="contenidoMenu"> </p-megaMenu>
    </div>
  </div>

</div>

<div class="ui-g ui-g-nopad">

  <div id="content-body" class="ui-md-10 ui-g-nopad ui-md-offset-1 ">

    <router-outlet></router-outlet>

  </div>
</div>

如何克服插入的这个 angular 错误并影响像 primeng 这样的套件的行为？

Answer 1

您获取 "contenidoMenu" 数组结果的错误。 Mega Menu 需要一个数组，就像它的文档中显示的那样，有多个堆叠的项目 因此，您需要一个具有以下结构的项目数组，如文档中所示：

      [
        {
          label: "MainHeader-lvl-0", icon: 'fa-check',
          items: [ //subheader must be in an MenuItem[][] not as usual an MenuItem[]
            [
              {
                label: "SubHeader-lvl-1",
                items: [
                  { label: "Item-lvl-1.1 add functionality here" },
                  { label: "Item-lvl-1.2 add functionality here" }
                ]
              }
            ],
            [
              {
                label: "SubHeader-lvl-2",
                items: [
                  { label: "Item-lvl-2.1 add functionality here" },
                  { label: "Item-lvl-2.2 add functionality here" }
                ]
              }
            ]
          ]
        }
      ]

因此，副标题必须是 Array<MenuItem[]> 而不是通常的 Array<MenuItem> 如果您修复了结构差异，它应该会起作用。 问题是 MegaMenu 似乎 *NgFor 超过了数组的数组 (Array<MenuItem[]>)。

希望对您有所帮助。