无法绑定到“ngModel”，因为它不是“input”的已知属性
启动我的Angular应用程序时，出现以下错误，即使组件未显示。
我必须注释掉，以便我的应用程序工作。
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>Créée le:</label> <input type="text" [ERROR ->][(ngModel)]="test" placeholder="sdfqsdf" /> </div> </div>"): InterventionDetails@4:28 ; Zone: <root> ; Task: Promise.then ; Value: 我正在看Hero plucker，但是我没有看到任何区别。
这是组件文件：
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Intervention } from '../../model/intervention'; import { OrigineFiche, TypeFiche } from '../../model/enums'; @Component({ selector: 'intervention-details', templateUrl: 'app/intervention/details/intervention.details.html', styleUrls: ['app/intervention/details/intervention.details.css'] }) export class InterventionDetails { // l'intervention est passée en paramètre du composant @Input() intervention: Intervention; public test : string = "toto"; }
没错，就是在app.module.ts中，我刚刚添加了：
import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })
为了能够使用双向数据绑定的表单input，你需要在你的Angular模块中导入FormsModule包。 欲了解更多信息，请参阅这里的Angular 2官方教程和表单的官方文档
投入这可能有助于某人。
假设你已经创build了一个新的NgModule，比如说AuthModule专门用来处理你的Auth需求，那么一定要在这个AuthModule中导入FormsModule 。
如果你只在FormsModule中使用AuthModule那么你不需要在默认的AppModule导入AppModule
所以在AuthModule这样的东西：
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { authRouting } from './auth.routing'; import { LoginComponent, SignupComponent } from './auth.component'; @NgModule({ imports: [ authRouting, FormsModule ], declarations: [ SignupComponent, LoginComponent ] }) export class AuthModule { }
那么如果你没有在FormsModule地方使用FormsModule就忘了在AppModule导入。
有两个步骤，你需要遵循摆脱这个错误
- 在您的应用程序模块中导入FormsModule
- 将它作为@NgModule装饰器中的导入值传递
基本上app.module.ts应该如下所示：
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import {AppChildComponent} from './appchild.component'; @NgModule({ imports: [ BrowserModule,FormsModule ], declarations: [ AppComponent, AppChildComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
希望能帮助到你
在你的应用程序模块中导入FormsModule 。
它会让你的应用程序运行良好。
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import {ContactListCopmponent} from './contacts/contact-list.component'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent,ContactListCopmponent ], bootstrap: [ AppComponent ] }) export class AppModule { }
在Angular 2，4 ＆ 5中使用[(ngModel)] ，你需要从Angular form中导入FormsModule …
也是在github的 Angular repo中，
angular / packages / forms / src / directives / ng_model.ts
对于AngularJs开发人员来说 ，这可能不是一件愉快的事情，因为在之前的任何地方都可以使用ng-model，但是由于Angular尝试将模块分开以使用任何你想使用的模块，现在ngModel已经在FormsModule中 。
所以简单地寻找app.module.ts ，并确保您有FormsModule导入…
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 { }
这也是Angular4 ngModel在FormsModule中的当前开始评论：
/** * `ngModel` forces an additional change detection run when its inputs change: * Eg: * ``` * <div>{{myModel.valid}}</div> * <input [(ngModel)]="myValue" #myModel="ngModel"> * ``` * Ie `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! */
如果你想使用你的input不是在一个窗体中，你可以在ngModelOptions使用它，并使独立真正 …
[ngModelOptions]="{standalone: true}"
有关更多信息，请参阅 Angular部分中的ng_model
我知道这个问题是关于Angular 2的，但是我在Angular 4上，这些答案都没有帮助。
在Angular 4中，语法必须是
[(ngModel)]
希望这可以帮助。
如果您需要使用[(ngModel)]首先需要在FormsModule中导入app.module.ts ，然后添加一个导入列表。 像这样的东西：
app.module.ts
-
import {FormsModule} from "@angular/forms";导入import {FormsModule} from "@angular/forms"; - 添加import
imports: [ BrowserModule, FormsModule ],
app.component.ts
- 例如：
<input type="text" [(ngModel)]="name" > - 然后
<h1>your name is: {{name}} </h1>
如果有人在应用接受的解决scheme后仍然出现错误，可能是因为您有一个单独的模块文件，用于要在其中使用input标记中的ngModel属性的组件。 在这种情况下，在组件的module.ts文件中也应用可接受的解决scheme。
当我第一次做这个教程的时候，main.ts和现在的稍有不同。 它看起来非常相似，但请注意区别（最上面的一个是正确的）。
正确：
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
旧教程代码：
import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);
这是为谁使用普通的JavaScript而不是types脚本的人。 除了像下面那样引用页面顶部的表单脚本文件之外
<script src="node_modules/@angular/forms/bundles/forms.umd.js"></script>
你也应该告诉模块加载器加载ng.forms.FormsModule 。 进行更改后，我的NgModule方法的imports属性如下所示
imports: [ng.platformBrowser.BrowserModule, ng.forms.FormsModule],
快乐的编码！
如果您在导入FormsModule后仍然收到错误，请检查您的控制台，因为您的项目没有编译（因为另一个错误可能是任何东西），而且您的解决scheme没有反映在您的浏览器中！
在我的情况下，我的控制台干草以下无关的错误：属性'retrieveGithubUser'types'ApiService'上不存在。
有时，当您尝试在不同的模块中使用不共享的模块组件时，会出现此错误。
例如，您有两个模块，分别是module1.componentA.component.ts和module2.componentC.component.ts，您尝试在module2中的模板中使用module1.componentA.component.ts中的select器（例如<module1-componentA [someInputVariableInModule1]="variableFromHTTPRequestInModule2"> ），即使您在@Input() someInputVariableInModule1有@Input() someInputVariableInModule1 ，它也会抛出someInputVariableInModule1在module1.componentA.component.ts中不可用的错误。
如果发生这种情况，您希望共享module1.componentA以便在其他模块中可访问。 因此，如果共享sharedModule中的module1.componentA，则module1.componentA将在其他模块（module1外部）中可用，并且导入sharedModule的每个模块都将能够访问其注入@Input()的模板中的select器。声明variables。
我从RC1升级到RC5，并收到此错误。
我完成了我的迁移（引入了一个新的app.module.ts文件，改变了package.json以包含新的版本和缺less的模块，最后根据Angular2的快速启动例子 ，将main.ts更改为启动）。
我做了一个npm update ，然后npm outdated以确认安装的版本是正确的，仍然没有运气。
我结束了完全擦拭node_modules文件夹，并重新安装与node_modules npm install – 瞧！ 问题解决了。
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}
