“无法绑定到 'ngModel',因为它不是 'p-calendar' 的已知属性”尝试使用 PrimeNG 组件的错误消息,为啥?

Posted

技术标签:

【中文标题】“无法绑定到 \'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?“无法绑定到 'ngModel',因为它不是 'p-calendar' 的已知属性”尝试使用 PrimeNG 组件的错误消息,为什么? 【发布时间】:2018-01-19 20:24:58 【问题描述】:

我是 Angular 2\4 的新手,我正在尝试按照这个快速视频教程将 PrimeNG 组件添加到我的 Angular 项目中:

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;

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

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)

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

【问题讨论】:

【参考方案1】:

在您的AppModule 中添加FormsModule

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

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

【讨论】:

Tnx 有效。我的疑问是:我为什么要添加 FromModule?是不是因为这个(ngModel)是这个模块中声明的东西? 当我们有 ngIf ,ngFor, ngModel 等 @AndreaNobili 时使用表单模块【参考方案2】:

这不会解决你的问题,但我在尝试使用 formControlName 属性时遇到了同样的错误:

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

【讨论】:

以上是关于“无法绑定到 'ngModel',因为它不是 'p-calendar' 的已知属性”尝试使用 PrimeNG 组件的错误消息,为啥?的主要内容,如果未能解决你的问题,请参考以下文章