web-dev-qa-db-ja.com

ngModelがAngular4で機能しない

私はAngular 4から 公式サイト を学習しており、 2-way data binding throughngModel 。ただし、FormsModuleがmodule.tsファイルにインポートされていても、[（ngModel）]をコンポーネントテンプレートに追加するとすぐにアプリが動作しなくなります。コンポーネントは読み込まれません。
Visual Studio Codeを使用しています。
これは私のapp.component.tsです

import { Component } from '@angular/core';

    export class Hero {
      id: number;
      name: string;
    }



    @Component({
      selector: 'app',
      template: `
      <h1>{{ title }}</h1>
      <h2>{{hero.name}} details!</h2>
      <div><label>Id:</label> {{hero.id}} </div>
      <div>name:<input [(ngModel)]="hero.name" type="text"></div>
      `,
      styles:[`
        .selected{
          transition: padding 0.3s;
          color: mediumseagreen;
        }
      `]
    })

    export class AppComponent {
      title = 'Tour Of Heroes';

     hero:Hero = {
       id:1,
       name:"Mr. Invisible"
     };
    }

これはapp.module.tsです

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

    import { AppComponent, Hero } from './app.component';

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

AppComponentはロードされず、単に表示されます

読み込み中...

angularngmodel
10
Mavil
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

    import { AppComponent, Hero } from './app.component';

    @NgModule({
      declarations: [
        AppComponent

      ],
      imports: [
        BrowserModule,
        FormsModule  // forms module should be in imports not in declarations
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
19
Rahul Singh
// add the import in module and add FormModule in import:
import { NgModule } from '@angular/core'
 imports: [
    BrowserModule,
   // add FormModule in import
    FormsModule
]
3
rahul kumar

モジュール宣言のFormsModuleセクションで必要なimportsに加えて、formタグ、またはngFormディレクティブを使用して、ngModel機能。

Withoutouは、次のようなngModelを使用するためにスタンドアロンコントロールを使用することもできます。

 <input [(ngModel)]="variable" #ctrl="ngModel" >

ソース： Angular documentation

2
Pac0
_import { FormsModule } from '@angular/forms';
_

次に、@NgModule(){imports:[FormsModule]}で他のスタッフと

0
Yuresh Karunanayake