web-dev-qa-db-ja.com

「p-calendarの既知のプロパティではないため、ngModelにバインドできません」PrimeNGコンポーネントを使用しようとするエラーメッセージ、なぜですか？

私はAngular 2\4で非常に新しいので、この簡単なビデオチュートリアルに従ってPrimeNGコンポーネントをmy Angular project：

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

およびPrimeNGチュートリアルページのGet Startedセクション： 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;
}

ご覧のとおり、このクラスをエクスポートしました。

export class MyModel {
  value: Date;
}

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)

どうして？なにが問題ですか？何が欠けていますか？この問題を解決するにはどうすればよいですか？私はチュートリアルに従ったようです...

javascriptangularjavascript-frameworkprimeng
9
AndreaNobili

FormsModuleにAppModuleを追加します。

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

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

これはあなたの問題を解決しませんが、formControlName属性を使用しようとすると同じエラーが発生しました：

<p-calendar [(ngModel)]="value" formControlName="debutaffichage"></p-calendar>
0
Kevin.Debeil