角2：「不能綁定到'ngModel」錯誤時FormsModule在app.module

我一直停留在數據綁定，因爲本教程的一部分，昨天是進口 https://angular.io/docs/ts/latest/tutorial/toh-pt1.html 角2：「不能綁定到'ngModel」錯誤時FormsModule在app.module

我一直收到此錯誤

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" name: ][(ngModel)]="hero.name" placeholder="name"> "): [email protected]:12 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'. (" name: ][(ngModel)]="hero.name" placeholder="name"> "): [email protected]:12

我看了看我的代碼，並肩與代碼的網頁上，甚至複製他們的代碼，看看我注意到有什麼不同的任何地方，當我貼吧，果然是完全一樣的，並且這個錯誤仍然發生。

我在這個問題上發現的約98％的信息都是基於他們忘記導入FormsModule，我不是這種情況。我甚至嘗試將其導入到其他.ts文件中，只是爲了查看是否有任何反應，並沒有解決問題。

我碰到所提到的角/表格依賴另一個必須是0.3.0或以上，我檢查包文件和我使用的是2.1.1

我去年安裝的節點和港口看到「噸真的與它搞砸到現在爲止，我有Windows Vista中，所以我無法獲得最新的一個，我的版本是5.7.0，我使用NPM 3.6.0

這裏是我的代碼

主.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 

import { AppModule } from './app.module'; 

const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule);

個

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.componet.ts

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' 
    }; 
}

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Angular QuickStart</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 
    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="node_modules/core-js/client/shim.min.js"></script> 
    <script src="node_modules/zone.js/dist/zone.js"></script> 
    <script src="node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 
    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html>

的package.json

{ 
    "name": "angular-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ", 
    "lite": "lite-server", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w" 
    }, 
    "licenses": [ 
    { 
     "type": "MIT", 
     "url": "https://github.com/angular/angular.io/blob/master/LICENSE" 
    } 
    ], 
    "dependencies": { 
    "@angular/common": "~2.1.1", 
    "@angular/compiler": "~2.1.1", 
    "@angular/core": "~2.1.1", 
    "@angular/forms": "~2.1.1", 
    "@angular/http": "~2.1.1", 
    "@angular/platform-browser": "~2.1.1", 
    "@angular/platform-browser-dynamic": "~2.1.1", 
    "@angular/router": "~3.1.1", 
    "@angular/upgrade": "~2.1.1", 
    "angular-in-memory-web-api": "~0.1.13", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.39", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
    "@types/core-js": "^0.9.34", 
    "@types/node": "^6.0.45", 
    "concurrently": "^3.0.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.3" 
    } 
}

我不知道.js文件嘿，當節點明星有所作爲時，我會發現這可能是過度殺傷，如果這沒有顯示出問題，並且你們想看看讓我知道，我會包含它們。

來源

2016-10-30 Optiq

你app.component和app.module代碼是完全一樣的？ – deek

是啊我只是抓住了我自己，並更新它，複製錯誤的文件大聲笑 – Optiq

改變英雄：英雄到英雄：任何。 – deek

您的應用程序模塊應該是這樣的：

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 { }

來源

2017-05-10 21:01:24 Houtan

角2：「不能綁定到'ngModel」錯誤時FormsModule在app.module

回答

相關問題