意涵

input元素⇄JS物件

• input元素的值會由JS物件決定
• 當input發生輸入，新的值會重設JS物件的值

定義Property

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

// プロパティーを定義する
export class AppComponent  {
  title='自社社員名簿';
  // クラスを型として指定。IDとnameのプロパティーをオブジェクトに強制したい
  member: Member={
    id: 1,
    name: '山田太郎'
  }
}

設定HTML模板

<h1>{{title}}</h1>
<h2>{{member.name}}</h2>
<div>
  <label>id: </label>
  <span>{{member.id}}</span>
</div>
<div>
  <label>name: </label>
  <!-- <span>{{member.name}}</span> -->
  <!-- 雙向綁定 -->
  <input type="text" [(ngModel)]="member.name"placeholder="名前" />
</div>

Ng Model設定

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

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

@NgModule({
    imports:      [ 
        //FormsModuleを配列に追加
        BrowserModule, 
        FormsModule　
    ],
    declarations: [ 
        AppComponent 
    ],
    bootstrap:    [ 
        AppComponent 
    ]
  })
export class AppModule { }