“无法绑定到'ngModel'，因为它不是'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 \ 4 的新手，我正在尝试按照这个快速视频教程将 PrimeNG 组件添加到我的Angular项目中：

I am very new in Angular 2\4 and I am trying to follow this quick video tutorial to add PrimeNG components to my Angular project:

https://www.youtube.com/watch？ v = 6Nvze0dhzkE

以及PrimeNG教程页面的使用入门部分： https://www.primefaces.org/primeng/#/setup

and the Get started section of the PrimeNG tutorial page: 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'}}

如您所见，我已将此标记插入显示日历组件：

As you can see I have inserted this tag to show the calendar component:

<p-calendar [(ngModel)]="value"></p-calendar>

（如该组件的官方文档所示： https://www.primefaces.org/primeng/#/calendar ）

(as shown also on the official documentation of this component: https://www.primefaces.org/primeng/#/calendar )

这里我有第一个问题，因为IntelliJ给我这个错误信息：

Here I have the first problem because IntelliJ give me this error message:

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.

我认为这很奇怪，因为这一行应该绑定用户在日历上选择的值我的模型的值变量。

I think that it is strange because this line should bind the value selected on the calendar by the user to the value variable of my model.

在教程之后我修改了 app.module.ts 以这种方式提交文件：

Following the tutorial I have modified the app.module.ts file in this way:

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;
}

正如你在这里看到的，我已经导出了这个类：

As you can see here I have exported this class:

export class MyModel {
  value: Date;
}

拥有值属性（类型日期）因此它应该是视图中此行绑定的属性：

having the value property (having type Date) so it should be the property bound by this line in the view:

<p-calendar [(ngModel)]="value"></p-calendar>

但是它无法工作，当我在JavaScript浏览器控制台中访问此应用程序时，我获得了这个错误消息：

But it can't work and when I access to this application in the JavaScript browser console I obtain this error message:

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)

为什么？怎么了？我错过了什么？我该如何尝试解决此问题？在我看来，我遵循了教程......

Why? What is wrong? What am I missing? How can I try to fix this issue? It seems to me that I followed the tutorial...

推荐答案

添加 FormsModule 在 AppModule 中：

// ...
import { FormsModule } from '@angular/forms';
// ...

@NgModule({
  // ...
  imports: [
    BrowserModule,
    FormsModule,
    CalendarModule
  ],
  // ...
})
export class AppModule { }

这篇关于“无法绑定到'ngModel'，因为它不是'p-calendar'”的已知属性。尝试使用PrimeNG组件的错误消息，为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！