「不能綁定到'ngModel'，因爲它不是'p-calendar'的一個已知屬性，」試圖使用PrimeNG組件的錯誤消息，爲什麼？

Question

我非常新的角2 \ 4，我試圖按照這種快速的視頻教程PrimeNG組件添加到我的角度項目：

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. 

我認爲這很奇怪，因爲這行應該綁定在cale上選擇的值由用戶給我的模型的值變量。

繼我已經以這種方式修改了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; 
} 

正如你可以在這裏看到我已出口這個類：具有值財產

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) 

爲什麼？哪裏不對？我錯過了什麼？我怎樣才能解決這個問題？在我看來，我跟着教程...

Answer 1

添加FormsModule在AppModule：

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

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