primeng p-menubar 示例不起作用

Posted 2023-03-13

【中文标题】primeng p-menubar 示例不起作用

【英文标题】：primeng p-menubar example not working

【发布时间】：2018-03-07 23:44:37

【问题描述】：

我收到以下错误。它告诉我它无法绑定“模型”，因为“p-menubar”不知道它。

我对 angular 和 primeng 很陌生。有人可以帮我吗？

错误：模板解析错误： 无法绑定到“模型”，因为它不是“p-menubar”的已知属性。 1. 如果 'p-menubar' 是一个 Angular 组件并且它有 'model' 输入，那么验证它是这个模块的一部分。 2. 如果“p-menubar”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 (" ][型号]="项目"> "): ng:///AppModule/AppComponent.html@1:23 'p-menubar' 不是已知元素： 1. 如果“p-menubar”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果“p-menubar”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。 (" [错误->] "): ng:///AppModule/AppComponent.html@1:12 评估http://localhost:3000/main.js 加载 main.js 堆栈跟踪： 语法错误@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34 TemplateParser.prototype.parse@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12967:19 JitCompiler.prototype._compileTemplate@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27161:18 JitCompiler.prototype._compileComponents/http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27080:56 JitCompiler.prototype._compileComponents@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:27080:9 JitCompiler.prototype._compileModuleAndComponents/http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26967:13 那么@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:1718:92 JitCompiler.prototype._compileModuleAndComponents@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26966:16 JitCompiler.prototype.compileModuleAsync@http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:26895:32 PlatformRef_.prototype._bootstrapModuleWithZone@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4568:16 PlatformRef_.prototype.bootstrapModule@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4554:16 @http://localhost:3000/main.js:4:1 @http://localhost:3000/main.js:1:31 @http://localhost:3000/main.js:1:2 评估@http://localhost:3000/node_modules/systemjs/dist/system.src.js:2843:8 translateAndInstantiate/http://localhost:3000/node_modules/systemjs/dist/system.src.js:3608:21 动态执行@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1166:18 评估@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1113:13 确保评估@http://localhost:3000/node_modules/systemjs/dist/system.src.js:1022:13 RegisterLoader$1.prototype[Loader.resolveInstantiate]/http://localhost:3000/node_modules/systemjs/dist/system.src.js:612:14 ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:392:17 Zone.prototype.run@http://localhost:3000/node_modules/zone.js/dist/zone.js:142:24 scheduleResolveOrReject/http://localhost:3000/node_modules/zone.js/dist/zone.js:844:52 ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:425:17 Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28 drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:602:25 k/http://localhost:3000/node_modules/core-js/client/shim.min.js:8:31581 k/http://localhost:3000/node_modules/core-js/client/shim.min.js:8:31451 s@http://localhost:3000/node_modules/core-js/client/shim.min.js:7:25990 本地主机：3000:22:53

这是 app.component.ts 代码：

    import  Component  from '@angular/core';
import  MenubarModule, MenuItem  from 'primeng/primeng';

@Component(
  selector: 'my-app',
  template: `
            <p-menubar [model]="items">
                <input type="text" pInputText placeholder="Search">
                <button pButton label="Logout" icon="fa-sign-out"></button>
            </p-menubar>
  `
//   templateUrl: './app/app.component.html'
)
export class AppComponent  

    items: MenuItem[];

    ngOnInit() 
        this.items = [
            
                label: 'File',
                items: [
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            label: 'Project',
                            label: 'Other',
                        ]
                    ,
                    label: 'Open',
                    label: 'Quit'
                ]
            ,
            
                label: 'Edit',
                icon: 'fa-edit',
                items: [
                    label: 'Undo', icon: 'fa-mail-forward',
                    label: 'Redo', icon: 'fa-mail-reply'
                ]
            
        ];
    

这是 app.module.ts：

    import  NgModule       from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  AppComponent   from './app.component';

@NgModule(
  imports:      [ BrowserModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
)
export class AppModule  

【参考方案1】：

我发现了问题。 “从 'primeng/primeng' 导入 MenubarModule, MenuItem ;”需要在 app.module.ts 中，而不是在 app.component.ts 中。