Kann nicht an 'ngModel' binden, da es keine bekannte Eigenschaft von 'input' ist, obwohl FormsModule importiert wurde

Question

Ich folge der Angular 2 tutorial on MVA. Ich kann nicht scheinen, dass die Verbindung zur Arbeit bindend ist. Ich habe das Update in Can't bind to 'ngModel' since it isn't a known property of 'input' angewendet, aber das funktioniert nicht. Der Fehler ist unter:

Unhandled Promise rejection: Template parse errors: 
Can't bind to 'ngModel' since it isn't a known property of 'input'. (" 
     <p> 
      <input [ERROR ->][(ngModel)]="sampleText" ><br/> 
      <span>{{sampleText}}</span> 
     </p> 
"): TasksComponent@2:19 ; Zone: <root> ; Task: Promise.then ; 

Mein main.ts Code ist wie folgt:

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Component, OnInit } from '@angular/core'; 

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


@Component({ 
    selector: 'tasks', 
    template: ` 
     <p> 
      <input [(ngModel)]="sampleText" ><br/> 
      <span>{{sampleText}}</span> 
     </p> 
    ` 
}) 
export class TasksComponent implements OnInit { 
    sampleText: string = ""; 
    ngOnInit() {} 
} 

@Component({ 
    selector: 'app', 
    directives: [TasksComponent], 
    template: ` 
     <h1>Hello World</h1> 
     <tasks></tasks> 
    ` 
}) 
export class AppComponent implements OnInit { 
    constructor() {} 

    ngOnInit() {} 
} 

bootstrap(AppComponent); 

Der Code funktioniert, wenn ich die Bindung des Zwei-Wege-Kommentar aus. Wie kann ich das beheben?

Answer 1

Sie unten verwenden,

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { Component, OnInit } from '@angular/core'; 

// Import and use below directive 
import { FORM_DIRECTIVES } from '@angular/forms'; 


@Component({ 
    selector: 'tasks', 
    template: ` 
    <p> 
     <input [(ngModel)]="sampleText" ><br/> 
     <span>{{sampleText}}</span> 
    </p> 
    ` 
    , directives: [FORM_DIRECTIVES] 
}) 
export class TasksComponent implements OnInit { 
    sampleText: string = ""; 

    constructor() {} 

    ngOnInit() {} 
} 

@Component({ 
    selector: 'my-app', 
    directives: [TasksComponent], 
    template: ` 
     <h1>Hello World</h1> 
     <tasks></tasks> 
    ` 
}) 
export class AppComponent implements OnInit { 
    constructor() {} 

    ngOnInit() {} 
} 

bootstrap(AppComponent); 

Hier ist die Plunker!!

Allerdings sollten Sie prüfen, NgModule verwenden und die FormsModule in importieren.

Hoffe, das hilft!