Question

我想使用primeng的megamenu组件，但不能使它工作，每次加载项目时，当它要显示菜单时，它只显示没有文本的第一个图标，仅此而已，直到我传递菜单空间才能显示第一行，在控制台中我总是看到同样的错误：

错误（ng：///MegaMenuModule/MegaMenu.ngfactory.js：184）错误：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。

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

我寻找distintcs docs

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

2.- Angular2: Cannot find a differ supporting object '[object Object]'

3.- p-menu not showing up

（和很多其他人）所以最后我推断出错误与角度中的错误有关，以管理数组阵列

我的代码：

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

请问我如何克服插入的角度误差并影响像primeng

这样的套件的行为

先谢谢

gmocamilo

Answer 1

您获得“contenidoMenu”数组结果的错误。 Mega菜单需要一个数组，如其中包含多个堆叠项目的文档因此，您需要一个具有以下Struckture的Item数组，如文档中所示：

      [
        {
          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" }
                ]
              }
            ]
          ]
        }
      ]

所以SubHeaders必须是Array<MenuItem[]> Array<MenuItem>，而不是Array<MenuItem[]>，如果你解决它应该有效的结果差异。问题是MegaMenu似乎* Ng For the Array of Arrays（viewPager.setAdapter(adapter);）。

我希望这会对你有所帮助。

Primeng受＆＃34;错误影响：无法找到不同的支持对象＆＃34;

1 个答案: