Question

我收到以下错误。它告诉我，它不能绑定＆＃39;模型＆＃39;因为＆＃39; p-menubar＆＃39;不知道。

我对角度和素数非常新。有人能帮助我吗？

错误：模板解析错误：无法绑定到＆＃39;模型＆＃39;因为它不是'p-menubar＆＃39;的已知属性。 1.如果＆＃39; p-menubar＆＃39;是一个Angular组件，它有＆＃39; model＆＃39;输入，然后验证它是否是该模块的一部分。 2.如果＆＃39; p-menubar＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。 3.允许任何财产添加＆＃39; NO_ERRORS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;这个组件。（＆＃34; ] [模型] =＆＃34;项目＆＃34;＆GT; ＆＃34;）：ng：///AppModule/AppComponent.html@1：23 ＆＃39;对菜单栏＆＃39;不是一个已知的元素： 1.如果＆＃39; p-menubar＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果＆＃39; p-menubar＆＃39;是一个Web组件，然后添加＆＃39; CUSTOM_ELEMENTS_SCHEMA＆＃39;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34; [错误 - ＆gt;] ＆＃34;）：ng：///AppModule/AppComponent.html@1：12 评估http://localhost:3000/main.js 正在加载main.js 堆栈跟踪：的SyntaxError @ 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 /＆LT; @ 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 /＆LT; @ 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：//本地主机：3000 / node_modules / systemjs / DIST / system.src.js：3608：21 dynamicExecute @ http://localhost:3000/node_modules/systemjs/dist/system.src.js:1166:18 doEvaluate @ http://localhost:3000/node_modules/systemjs/dist/system.src.js:1113:13 ensureEvaluate @ 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 /＆LT; @ 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：//本地主机：3000 / node_modules /芯-JS /客户端/ shim.min.js：8：31581 K /＆LT; @ http://localhost:3000/node_modules/core-js/client/shim.min.js:8:31451 小号@ 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 { }

Answer 1

我发现了问题。＆＃34;导入{MenubarModule，MenuItem}来自＆＃39; primeng / primeng＆＃39 ;;＆＃34;需要在app.module.ts中，而不是在app.component.ts。

primeng p-menubar示例不起作用

1 个答案: