Primeng betroffen von "Fehler: Kann ein anderes unterstützendes Objekt nicht finden"

Question

Ich möchte die Megamenu-Komponente von primeng verwenden, aber kann es nicht funktionieren, jedes Mal wenn ich das Projekt lade, und wenn es das Menü zeigen wird, es einfach zeige das erste Symbol ohne Text und nichts mehr, bis ich den Menübereich übergebe, so dass nur die erste Zeile angezeigt wird und in der Konsole immer der gleiche Fehler angezeigt wird:

FEHLER (ng: /// MegaMenuModule /MegaMenu.ngfactory.js:184) Fehler: Kann kein unterstützendes Objekt '[object Object]' vom Typ 'object' finden. NgFor unterstützt nur die Bindung an Iterables wie Arrays.

die megamenu Komponente hängt von un-Array, das die Definition des Menü enthält: https://www.primefaces.org/primeng/#/megamenu

i docs sucht distintcs

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

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

3 .- p-menu not showing up

(und viele andere) so schließlich ableiten i der Fehler mit einem Fehler in dem Winkel zu tun, um Arrays von Arrays zu verwalten

mein Code:

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

---

bitte, wie kann ich überwinde diese Winkelfehler, der eingeführt wird, und die Auswirkungen auf die Verhalten einer Suite wie primeng

dank fortschrittlicher

gmocamilo

---

Answer 1

Der Fehler, den Sie erhalten Ergebnisse Ihres "contenidoMenu" -Arrays. Mega-Menü benötigt ein Array wie gezeigt darin Docs ist mit mehreren Elementen gestapelt Sie wie einen Item-Array mit dem folgenden Struckture So müssen in dem Text & Tabellen gezeigt:

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

So ist die Subkopfabschnitte muss eine Array<MenuItem[]> nicht wie üblich eine seine Array<MenuItem> Wenn Sie diesen Unterschied beheben, sollte es funktionieren. Das Problem ist, dass MegaMenu scheint * NgFor über dieses Array von Arrays (Array<MenuItem[]>).

Ich hoffe, das wird Ihnen helfen.