未處理的承諾拒絕：模板解析錯誤：無法綁定到'ngModel'，因爲它不是'輸入'的已知屬性

Question

我總是得到錯誤無法綁定到'ngModel'，因爲它不是「輸入」的已知屬性。如果我嘗試使用這樣的：

<div *ngIf="guide" class="form-group"> 
    <label for="guideName">Name: </label> 
    <input class="form-control" name="guideName" [(ngModel)]="test" required id="guideName"> 

    <button (click)="saveGuide(guide)"></button> 
</div> 

我app.module.ts看起來是這樣的：

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

import {GuideModule} from "./guide/guide.module"; 

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

export class AppModule {} 

在我的package.json我：

"dependencies": { 
    ... 
    "@angular/forms": "^2.1.2", 
    ... 
} 

我的systemjs.config.ts：

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'node_modules/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      "@angular/forms": "node_modules/@angular/forms/bundles/forms.umd.js", 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

Answer 1

因爲guide-details.component.ts是不是你進口FormsModule（NgModel指令是FormsModule部分）AppModule一部分您收到此錯誤。您必須在模塊中導入FormsModule，其中guide-details.component.ts已被聲明或將guide-details.component.ts移動到AppModule的聲明。