Angular2 RC5教程：無法綁定到'ngModel'，因為它不是'input'的已知屬性

Question

繼Angular 2 “Hero tour”教程之后 ，我遇到以下錯誤：

Unhandled Promise rejection: Template parse errors:  
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
    <div>
      <label>name: </label>
      <input [ERROR ->][(ngModel)]="hero.name" placeholder="name">
    </div>
    "): AppComponent@6:13 ; Zone: <root> ; Task: Promise.then ; Value: 

我的package.json內容是：

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2": "^2.0.0-beta.17",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  }
}

app.module.ts內容：

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

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

export class AppModule { }

和app.component內容：

import { Component } from '@angular/core';
export class Hero {
    id: number;
    name: string;
}
@Component({
    selector: 'my-app',
    template: `
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
    title = 'Tour of Heroes';
    hero: Hero = {
        id: 1,
        name: 'Windstorm'
    };
}

我花時間在stackoverflow上閱讀並應用類似問題中提出的解決方案但沒有成功。

可能有什么不對？

方案：

使用

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

代替 ：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

Answer 1

你的app.module.ts應如下所示：

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

更新：RC6及更高版本現在已經過時了

Answer 2

在RC6中它看起來像這樣：

...
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [ ..., FormsModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

即提供provideForms ， disableDeprecatedForms被刪除為已棄用。 有關詳細信息，請查看https://github.com/angular/angular/blob/master/CHANGELOG.md 。

Answer 3

謝謝你，除非那部分......什么都沒發生！ import { FormsModule, provideForms, disableDeprecatedForms } from '@angular/forms';

Answer 4

如果您不根據需要更新app.modules.ts文件，則會發生類似的錯誤。 那就是添加以下導入

import { FormsModule }   from '@angular/forms';

和FormsModule如下：

  導入：[BrowserModule，FormsModule]， 

Answer 5

該應用程序工作正常。 但我在測試中遇到了這個錯誤。 你應該在app.monent.ts中的app.component.spec.ts中導入FormsModule來解決這個問題。