请问无法绑定到“ngModel”，因为它不是“输入”的已知属性

Question

无法绑定到“ngModel”，因为它不是“输入”的已知属性我在启动我的角度应用程序时有以下错误，即使组件没有显示。我要评论一下<input>这样我的应用程序就能工作了。    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:我在看英雄柱塞，但我没有看到与我的代码有任何区别。以下是组件文件：    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";     }

Answer 1

是的，就是这样，在app.module.ts中，我只是补充道：

import { FormsModule } from '@angular/forms';[...]@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]})

Answer 2

为了能够对表单输入使用双向数据绑定，您需要导入FormsModule你的包裹Angular模块。有关更多信息，请参见Angular 2官方教程这里的官方文件表格

Answer 3

供使用[(ngModel)]在……里面角2, 4 & 5+，您需要导入表单模块从角度来看.。

同时，它也是在这条路径下形成的角回购在……里面GitHub:

角/包/窗体/src/指令/ng_model.

也许这对AngularJs开发人员因为你可以用吴模型在任何时候，任何地方，但是当角试图分开模块来使用你想要的任何时候你想要使用的东西，ngModel在表单模块现在。

另外，如果您正在使用ReactiveFormsModule也需要进口。

所以简单的寻找app.module.ts确保你有FormsModule进口.。

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';  //<<<< import it hereimport { AppComponent } from './app.component';@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule //<<<< and here
  ],
  providers: [],
  bootstrap: [AppComponent]})export class AppModule { }

这也是Angular 4的当前开始注释。ngModel在……里面表单模块:

/**
 * `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!
 */

如果您想要使用您的输入，而不是以一种形式，您可以使用它与ngModelOptions使自己独立千真万确...

[ngModelOptions]="{standalone: true}"

有关更多信息，请参见Ng模型角截面这里