私は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はロードされず、単に表示されます
読み込み中...
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 { }
// add the import in module and add FormModule in import:
import { NgModule } from '@angular/core'
imports: [
BrowserModule,
// add FormModule in import
FormsModule
]
モジュール宣言のFormsModule
セクションで必要なimports
に加えて、form
タグ、またはngForm
ディレクティブを使用して、ngModel
機能。
Withoutouは、次のようなngModel
を使用するためにスタンドアロンコントロールを使用することもできます。
<input [(ngModel)]="variable" #ctrl="ngModel" >
_import { FormsModule } from '@angular/forms';
_
次に、@NgModule(){imports:[FormsModule]}
で他のスタッフと