"Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'" 尝试使用 PrimeNG 组件时出现错误消息,为什么?
"Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'" error message trying to use PrimeNG component, why?
我是 Angular 2 的新手,我正在尝试按照这个快速视频教程添加 PrimeNG[=我的 Angular 项目的 55=] 个组件:
https://www.youtube.com/watch?v=6Nvze0dhzkE
和 PrimeNG 教程页面的入门 部分:https://www.primefaces.org/primeng/#/setup
这是我的 app.component.html
观点:
<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<p-calendar [(ngModel)]="value"></p-calendar>
{{value | date:'dd.mm.yyy'}}
如您所见,我插入了这个标签来显示日历组件:
<p-calendar [(ngModel)]="value"></p-calendar>
(如该组件的官方文档所示:https://www.primefaces.org/primeng/#/calendar)
这里我遇到了第一个问题,因为 IntelliJ 给我这个错误信息:
Error:(9, 13) Angular: Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
我认为这很奇怪,因为这一行应该将用户在日历上选择的值绑定到我模型的 value 变量。
按照教程,我以这种方式修改了 app.module.ts
文件:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {CalendarModule} from 'primeng/primeng';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CalendarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class MyModel {
value: Date;
}
正如你在这里看到的,我已经导出了这个 class:
export class MyModel {
value: Date;
}
具有值属性(具有类型日期)所以它应该是属性视图中的这一行:
<p-calendar [(ngModel)]="value"></p-calendar>
但它无法工作,当我在 JavaScript 浏览器控制台中访问此应用程序时,我收到此错误消息:
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p-calendar [ERROR ->][(ngModel)]="value"></p-calendar {{value | date:'dd.mm.yyy'}}
"): ng:///AppModule/AppComponent.html@8:12
at syntaxError (http://localhost:4200/vendor.bundle.js:7283:34)
at TemplateParser.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:18403:19)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:32555:39)
at http://localhost:4200/vendor.bundle.js:32475:62
at Set.forEach (native)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:32475:19)
at http://localhost:4200/vendor.bundle.js:32362:19
at Object.then (http://localhost:4200/vendor.bundle.js:7272:148)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:32361:26)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:32290:37)
syntaxError @ compiler.es5.js:1690
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12810
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26962
(anonymous) @ compiler.es5.js:26882
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26882
(anonymous) @ compiler.es5.js:26769
then @ compiler.es5.js:1679
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap a55b161…:54
2 @ main.ts:11
__webpack_require__ @ bootstrap a55b161…:54
webpackJsonpCallback @ bootstrap a55b161…:25
(anonymous)
为什么?怎么了?我错过了什么?我该如何尝试解决这个问题?在我看来,我遵循了教程...
在您的 AppModule
中添加 FormsModule
:
// ...
import { FormsModule } from '@angular/forms';
// ...
@NgModule({
// ...
imports: [
BrowserModule,
FormsModule,
CalendarModule
],
// ...
})
export class AppModule { }
这不会解决你的问题,但我在尝试使用 formControlName 属性时遇到了同样的错误:
<p-calendar [(ngModel)]="value" formControlName="debutaffichage"></p-calendar>
我是 Angular 2 的新手,我正在尝试按照这个快速视频教程添加 PrimeNG[=我的 Angular 项目的 55=] 个组件:
https://www.youtube.com/watch?v=6Nvze0dhzkE
和 PrimeNG 教程页面的入门 部分:https://www.primefaces.org/primeng/#/setup
这是我的 app.component.html
观点:
<!--The whole content below can be removed with the new code.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!!
</h1>
</div>
<p-calendar [(ngModel)]="value"></p-calendar>
{{value | date:'dd.mm.yyy'}}
如您所见,我插入了这个标签来显示日历组件:
<p-calendar [(ngModel)]="value"></p-calendar>
(如该组件的官方文档所示:https://www.primefaces.org/primeng/#/calendar)
这里我遇到了第一个问题,因为 IntelliJ 给我这个错误信息:
Error:(9, 13) Angular: Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
我认为这很奇怪,因为这一行应该将用户在日历上选择的值绑定到我模型的 value 变量。
按照教程,我以这种方式修改了 app.module.ts
文件:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {CalendarModule} from 'primeng/primeng';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CalendarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class MyModel {
value: Date;
}
正如你在这里看到的,我已经导出了这个 class:
export class MyModel {
value: Date;
}
具有值属性(具有类型日期)所以它应该是属性视图中的这一行:
<p-calendar [(ngModel)]="value"></p-calendar>
但它无法工作,当我在 JavaScript 浏览器控制台中访问此应用程序时,我收到此错误消息:
compiler.es5.js:1690 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'p-calendar'.
1. If 'p-calendar' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'p-calendar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<p-calendar [ERROR ->][(ngModel)]="value"></p-calendar {{value | date:'dd.mm.yyy'}}
"): ng:///AppModule/AppComponent.html@8:12
at syntaxError (http://localhost:4200/vendor.bundle.js:7283:34)
at TemplateParser.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:18403:19)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:32555:39)
at http://localhost:4200/vendor.bundle.js:32475:62
at Set.forEach (native)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:32475:19)
at http://localhost:4200/vendor.bundle.js:32362:19
at Object.then (http://localhost:4200/vendor.bundle.js:7272:148)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:32361:26)
at JitCompiler.webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:32290:37)
syntaxError @ compiler.es5.js:1690
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.TemplateParser.parse @ compiler.es5.js:12810
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate @ compiler.es5.js:26962
(anonymous) @ compiler.es5.js:26882
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileComponents @ compiler.es5.js:26882
(anonymous) @ compiler.es5.js:26769
then @ compiler.es5.js:1679
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents @ compiler.es5.js:26768
webpackJsonp../node_modules/@angular/compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync @ compiler.es5.js:26697
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
webpackJsonp../node_modules/@angular/core/@angular/core.es5.js.PlatformRef_.bootstrapModule @ core.es5.js:4522
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap a55b161…:54
2 @ main.ts:11
__webpack_require__ @ bootstrap a55b161…:54
webpackJsonpCallback @ bootstrap a55b161…:25
(anonymous)
为什么?怎么了?我错过了什么?我该如何尝试解决这个问题?在我看来,我遵循了教程...
在您的 AppModule
中添加 FormsModule
:
// ...
import { FormsModule } from '@angular/forms';
// ...
@NgModule({
// ...
imports: [
BrowserModule,
FormsModule,
CalendarModule
],
// ...
})
export class AppModule { }
这不会解决你的问题,但我在尝试使用 formControlName 属性时遇到了同样的错误:
<p-calendar [(ngModel)]="value" formControlName="debutaffichage"></p-calendar>