ngModel不在Angular4中工作

Question

我从官方网站学习Angular 4，我通过ngModel学习了双向数据绑定部分。但是，只要我将[（ngModel）]添加到组件模板中，我的应用程序就会停止工作，即使FormsModule已导入模块中。ts文件。组件未加载
我正在使用Visual Studio代码<这是我的应用程序。组成部分ts

import { Component } from '@angular/core';

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }  

这是一个应用程序。单元ts

import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent,
        FormsModule
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { } 

AppComponent没有加载，只是显示

加载。。。

Answer 1

除了模块声明的imports部分所需的FormsModule之外，您还必须使用form标记或ngForm指令来启用ngModel功能。

如果没有，您也可以使用独立控件来使用ngModel，如下所示：

 <input [(ngModel)]="variable" #ctrl="ngModel" >

资料来源：角度文件

Answer 2

正如其他人指出的，导入表单模块（例如，在app.module.ts文件中）非常重要在这个具体问题中，它在导入部分缺失。

但是我添加这个答案是为了警告你一些其他的事情，我不时会遇到这些事情。

如果您只是单独使用ngModel，而没有在某个地方使用表单，则不必为输入指定name。

<input ... [(ngModel)]="model.something"`>

但是当您在表单中使用它时，name属性将成为必需的！

<form>
  <input ... name="something" [(ngModel)]="model.something"`>
</form>

它实际上在文档中：

在标记中使用ngModel时，还需要提供name属性，以便控件可以在父窗体中以该名称注册。

如果你错过了它，它将不会显示任何错误，它只是不会工作。

Answer 3

import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }