无法绑定到“ngModel"，因为它不是“input"的已知属性 [英] Can't bind to 'ngModel' since it isn't a known property of 'input'
问题描述
我在启动我的 Angular 应用程序时遇到以下错误，即使组件没有显示.
我必须注释掉 以便我的应用程序正常工作.
zone.js:461 未处理的承诺拒绝:模板解析错误:无法绑定到ngModel"，因为它不是input"的已知属性.("<div><label>已创建:</label><input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo"/></div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:
我正在查看 Hero plunker，但我看不出与我的代码有任何区别.
这是组件文件:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';从'../../model/intervention'导入{干预}；@成分({选择器:干预细节"，templateUrl: 'app/intervention/details/intervention.details.html',styleUrls: ['app/intervention/details/intervention.details.css']})出口类干预详情{@Input() 干预:干预；公开测试:字符串=toto"；}For using [(ngModel)] in Angular 2, 4&5+，你需要从Angular表单中导入FormsModule...
此外，它位于 GitHub 上 Angular 存储库 中的表单下的此路径中:
<块引用>angular/packages/forms/src/directives/ng_model.ts
对于 AngularJS 开发人员来说，这可能不是一件很愉快的事情，因为您之前可以在任何地方使用 ng-model，但是由于 Angular 试图分离模块以使用您所希望您当时想使用，ngModel 现在在 FormsModule 中.
此外，如果您使用 ReactiveFormsModule，它也需要导入.
因此只需查找 app.module.ts 并确保您已将 FormsModule 导入...
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'@angular/forms' 导入 { FormsModule };//<<<<在这里导入从 './app.component' 导入 { AppComponent };@NgModule({声明: [应用组件],进口:[BrowserModule, FormsModule//<<<<和这里],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }此外，这些是 FormsModule 中 Angular4 ngModel 的当前起始注释:
/*** `ngModel` 在其输入更改时强制执行额外的更改检测:* 例如:*```* <div>{{myModel.valid}}</div>* *```* IE.`ngModel` 可以在元素上导出自身，然后在模板中使用.* 通常，这将导致使用导出指令的`input` 之前的表达式* 拥有和过去一样的价值* 脏检查过.由于这是 `ngModel` 的一个非常常见的情况，我们添加了第二个更改* 检测运行.** 备注:* - 无论更改了多少`ngModel`，这只是一次额外的运行.* - 这是对指令使用 `exportAs` 时的普遍问题！*/如果您想使用您的输入，而不是在表单中，您可以将它与 ngModelOptions 一起使用，并使独立的 true...
[ngModelOptions]={standalone: true}";有关更多信息，请查看 Angular 部分中的 ng_model 这里.
I've got the following error when launching my Angular app, even if the component is not displayed.
I have to comment out the <input> so that my app works.
zone.js:461 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
<div>
<label>Created:</label>
<input type="text" [ERROR ->][(ngModel)]="test" placeholder="foo" />
</div>
</div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value:
I'm looking at the Hero plunker, but I don't see any difference from my code.
Here is the component file:
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Intervention } from '../../model/intervention';
@Component({
selector: 'intervention-details',
templateUrl: 'app/intervention/details/intervention.details.html',
styleUrls: ['app/intervention/details/intervention.details.css']
})
export class InterventionDetails
{
@Input() intervention: Intervention;
public test : string = "toto";
}
For using [(ngModel)] in Angular 2, 4 & 5+, you need to import FormsModule from Angular form...
Also, it is in this path under forms in the Angular repository on GitHub:
angular / packages / forms / src / directives / ng_model.ts
Probably this is not a very pleasurable for the AngularJS developers as you could use ng-model everywhere anytime before, but as Angular tries to separate modules to use whatever you'd like you to want to use at the time, ngModel is in FormsModule now.
Also, if you are using ReactiveFormsModule it needs to import it too.
So simply look for app.module.ts and make sure you have FormsModule imported in...
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // <<<< import it here
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, FormsModule // <<<< And here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Also, these are the current starting comments for Angular4 ngModel in FormsModule:
/**
* `ngModel` forces an additional change detection run when its inputs change:
* E.g.:
* ```
* <div>{{myModel.valid}}</div>
* <input [(ngModel)]="myValue" #myModel="ngModel">
* ```
* I.e. `ngModel` can export itself on the element and then be used in the template.
* Normally, this would result in expressions before the `input` that use the exported directive
* to have and old value as they have been
* dirty checked before. As this is a very common case for `ngModel`, we added this second change
* detection run.
*
* Notes:
* - this is just one extra run no matter how many `ngModel` have been changed.
* - this is a general problem when using `exportAs` for directives!
*/
If you'd like to use your input, not in a form, you can use it with ngModelOptions and make standalone true...
[ngModelOptions]="{standalone: true}"
For more information, look at ng_model in the Angular section here.
这篇关于无法绑定到“ngModel"，因为它不是“input"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
