2017-07-02 34 views
1

私はちょうど学習を始めました。私app.components.tsファイルには、次のようになります。角4: 'ngModel'にバインドできません

import { Component, NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [FormsModule ], 
    //... 
}) 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    // title = 'app'; 
    name = ''; 
} 

と私app.component.htmlはこれです:

<input type="text" [(ngModel)]="name"> 
    <p>{{ name }}</p> 

JavaScriptコンソールにはエラー、次の私を与えている:...

compiler.es5.js:1689 Uncaught Error: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("et="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2> 
    </li> 
    <input type="text" [ERROR ->][(ngModel)]="name"> 
    <p>{{ name }}</p> 
</ul> 
"): ng:///AppModule/[email protected]:21 
    at syntaxError (http://localhost:4200/vendor.bundle.js:18052:34) 
    at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:29164:19) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:43209:39) 
    at http://localhost:4200/vendor.bundle.js:43129:62 
    at Set.forEach (native) 
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:43129:19) 

ThisをページにはFormsModuleを追加することをおすすめします。あなたはそれが動作していないのを見ることができます。

+0

https://plnkr.co/edit/tWWd0bM0HAgThbtQxSao?p=preview期待通りに働いています。しかし、もしあなたが 'plain javascript'を使っているなら、これを見つけました。https://stackoverflow.com/a/41092752/5111904 –

+0

これまでにこのエラーを見ました。どの角度バージョンを使用していますか?そして、プランナーを置くことができますか? – Gary

+0

私は角度4を使用しています – Cody

答えて

1

クラスAppModuleがありませんか?

import { Component, NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports: [FormsModule ], 
    //... 
}) 
export class AppModule {} // <-- do you have this part? 
+0

いいえ、追加してもまだエラーが発生しています – Cody

+0

新しいエラーは何ですか? – DeborahK

0

ngModelが入力に名前を必要とします:

<input type="text" [(ngModel)]="name" name="nome"> 
関連する問題