受“错误：找不到不同的支持对象”影响的 Primeng

Posted 2023-02-22

【中文标题】受“错误：找不到不同的支持对象”影响的 Primeng

【英文标题】：Primeng affected by "Error: Cannot find a differ supporting object"

【发布时间】：2018-04-19 07:55:42

【问题描述】：

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

错误 (ng:///MegaMenuModule/MegaMenu.ngfactory.js:184) 错误：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

megamenu 组件依赖于包含菜单定义的 un 数组：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

（和很多其他人）所以最后我推断错误与 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>

---

请问我该如何克服这个插入并影响像primeng这样的套件的行为的角度错误

多谢了

gmocamilo

---

【问题讨论】：

你把<p-megaMenu [model]="items"></p-megaMenu>标签放在哪里了？

那个进入app.component,html;我忘了包括它对不起，我刚刚更新了我的代码

【参考方案1】：

您获得“contenidoMenu”数组结果的错误。 超级菜单需要一个数组，就像它的文档中显示的那样，里面有多个堆叠的项目 因此，您需要一个具有以下结构的 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>。 问题在于 MegaMenu 似乎 *NgFor 超过了该数组 (Array<MenuItem[]>)。

希望对你有帮助。

【讨论】：

对不起，我刚刚检查过了，但这有效！！！现在我遇到了无法为其添加功能的麻烦，但非常感谢！

使用您的模板（不是官方文档中的模板）最后我可以添加功能...非常感谢！！！

很高兴为您提供帮助 :)

这对我不起作用。请问可以提供工作代码吗？