Primeng은 "오류 : 다른 지원 개체를 찾을 수 없습니다"

Question

primeng의 megamenu 구성 요소를 사용하고 싶지만 프로젝트를로드 할 때마다 그것을 작동시킬 수 없습니다. 첫 번째 행을 보여주기 위해 메뉴 공간을 지나갈 때까지 텍스트가없고 더 이상 아무것도없는 첫 번째 아이콘을 표시하고 콘솔에 항상 동일한 오류가 표시됩니다.

ERROR (ng : /// MegaMenuModule /MegaMenu.ngfactory.js:184) 오류 : 'object'유형의 '[object Object]'를 지원하는 다른 오브젝트를 찾을 수 없습니다. NgFor는 배열과 같은 Iterable에 대한 바인딩 만 지원합니다.

megamenu 성분은 메뉴의 정의에 포함되지 않은 배열에 따라 결정 전 distintcs의 문서를 찾아 https://www.primefaces.org/primeng/#/megamenu

을

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> 

---

나는이 각 삽입 오류와 영향을 극복 할 수있는 방법하시기 바랍니다 고급

gmocamilo

,536을에 primeng 같은 제품군의 행동

감사

---

Answer 1

오류 "contenidoMenu"배열의 결과가 나타납니다. 서브 헤더가 Array<MenuItem[]> 평소 아닌 있어야합니다 그래서

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

: 그것은 그래서 당신이 문서에 표시된 것처럼 다음 Struckture와 아이템의 배열을 필요로 적층 된 복수 항목과 오피스의에 표시된 것처럼 메가 메뉴 배열이 필요합니다 Array<MenuItem> 당신이 그 견고한 차이를 해결한다면 그것은 효과가 있습니다. MegaMenu가 어레이 배열을 통해 * NgFor로 보이는 문제가 있습니다 (Array<MenuItem[]>).

이 정보가 도움이되기를 바랍니다.