请问无法绑定到“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,&nbsp;4&nbsp;&&nbsp;5+，您需要导入表单模块从角度来看.。同时，它也是在这条路径下形成的角回购在……里面GitHub:角/包/窗体/src/指令/ng_model.也许这对AngularJs开发人员因为你可以用吴模型在任何时候，任何地方，但是当角试图分开模块来使用你想要的任何时候你想要使用的东西，ngModel在表单模块现在。另外，如果您正在使用ReactiveFormsModule也需要进口。所以简单的寻找app.module.ts确保你有FormsModule进口.。import&nbsp;{&nbsp;BrowserModule&nbsp;}&nbsp;from&nbsp;'@angular/platform-browser';import&nbsp;{&nbsp;NgModule&nbsp;}&nbsp;from&nbsp;'@angular/core';import&nbsp;{&nbsp;FormsModule&nbsp;}&nbsp;from&nbsp;'@angular/forms';&nbsp;&nbsp;//<<<<&nbsp;import&nbsp;it&nbsp;hereimport&nbsp;{&nbsp;AppComponent&nbsp;}&nbsp;from&nbsp;'./app.component';@NgModule({ &nbsp;&nbsp;declarations:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;AppComponent &nbsp;&nbsp;], &nbsp;&nbsp;imports:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;BrowserModule,&nbsp;FormsModule&nbsp;//<<<<&nbsp;and&nbsp;here &nbsp;&nbsp;], &nbsp;&nbsp;providers:&nbsp;[], &nbsp;&nbsp;bootstrap:&nbsp;[AppComponent]})export&nbsp;class&nbsp;AppModule&nbsp;{&nbsp;}这也是Angular 4的当前开始注释。ngModel在……里面表单模块:/** &nbsp;*&nbsp;`ngModel`&nbsp;forces&nbsp;an&nbsp;additional&nbsp;change&nbsp;detection&nbsp;run&nbsp;when&nbsp;its&nbsp;inputs&nbsp;change: &nbsp;*&nbsp;E.g.: &nbsp;*&nbsp;``` &nbsp;*&nbsp;<div>{{myModel.valid}}</div> &nbsp;*&nbsp;<input&nbsp;[(ngModel)]="myValue"&nbsp;#myModel="ngModel"> &nbsp;*&nbsp;``` &nbsp;*&nbsp;I.e.&nbsp;`ngModel`&nbsp;can&nbsp;export&nbsp;itself&nbsp;on&nbsp;the&nbsp;element&nbsp;and&nbsp;then&nbsp;be&nbsp;used&nbsp;in&nbsp;the&nbsp;template. &nbsp;*&nbsp;Normally,&nbsp;this&nbsp;would&nbsp;result&nbsp;in&nbsp;expressions&nbsp;before&nbsp;the&nbsp;`input`&nbsp;that&nbsp;use&nbsp;the&nbsp;exported&nbsp;directive &nbsp;*&nbsp;to&nbsp;have&nbsp;and&nbsp;old&nbsp;value&nbsp;as&nbsp;they&nbsp;have&nbsp;been &nbsp;*&nbsp;dirty&nbsp;checked&nbsp;before.&nbsp;As&nbsp;this&nbsp;is&nbsp;a&nbsp;very&nbsp;common&nbsp;case&nbsp;for&nbsp;`ngModel`,&nbsp;we&nbsp;added&nbsp;this&nbsp;second&nbsp;change &nbsp;*&nbsp;detection&nbsp;run. &nbsp;* &nbsp;*&nbsp;Notes: &nbsp;*&nbsp;-&nbsp;this&nbsp;is&nbsp;just&nbsp;one&nbsp;extra&nbsp;run&nbsp;no&nbsp;matter&nbsp;how&nbsp;many&nbsp;`ngModel`&nbsp;have&nbsp;been&nbsp;changed. &nbsp;*&nbsp;-&nbsp;this&nbsp;is&nbsp;a&nbsp;general&nbsp;problem&nbsp;when&nbsp;using&nbsp;`exportAs`&nbsp;for&nbsp;directives! &nbsp;*/如果您想要使用您的输入，而不是以一种形式，您可以使用它与ngModelOptions使自己独立千真万确...[ngModelOptions]="{standalone:&nbsp;true}"有关更多信息，请参见Ng模型角截面这里