【Angular】事件綁定與ngIf

基本用法

<li (click)="onSelected(member)">

• onclik → onclick事件
• onSelected(member) → 綁定的handler函數，定義會寫在app.component.ts

Typescript定義

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

//Member クラスのようにプロパティーを強制する
const MEMBERS: Member[] = [
  {id: 11, name: '武山学'},
  {id: 12, name: '初音ミク'},
  {id: 13, name: '桐山零'},
  {id: 14, name: '三角竜之'},
  {id: 15, name: '羽生結弦'},
  {id: 16, name: '佐々木希'},
  {id: 17, name: '松崎はとり'},
  {id: 18, name: '半沢直樹'},
  {id: 19, name: '伊藤幸'},
  {id: 20, name: '桜田深雪'}
];

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


export class AppComponent  {
  title='自社社員名簿';
  members = MEMBERS; 
  // 選択している社員を保存するため、保存用のプロパティーを定義する
  selectedMember: Member;
  // selectedMember只有在onselected觸發後，才會有值。一開始的時候沒有值
  onSelected(member: Member): void {
    this.selectedMember=member;
  }
}

HTML模板與Ngif

<h1>{{title}}</h1>
<h2>社員一覧</h2>

<ul class="members">
<!-- クリックイベントを設定する -->
  <li *ngFor="let member of members" (click)="onSelected(member)">
    <spanclass="badge">{{member.id}}</span>
    {{member.name}}
  </li>
</ul>
<!-- selectedMemberがまだ選択されてない時はエラーになる -->
<!-- selectedMemberがまだ選択された時のみ、以下のHTMLを表示する -->
<div *ngIf="selectedMember">
<!-- selectedMemberの値がある場合、コンテンツを表示する -->
  <h2>{{selectedMember.name}}</h2>
  <div>
    <label>id: </label>{{selectedMember.id}}
  </div>
  <div>
    <label>name: </label>
    <input type="text" [(ngModel)]="selectedMember.name"placeholder="名前">
  </div>
</div>

屬性綁定

當onclick觸發事件後，綁定class在元素上

<h1>{{title}}</h1>
<h2>社員一覧</h2>

<ul cl
ass="members">
<!-- クリックイベントを設定する -->
<li *ngFor="let member of members" (click)="onSelected(member)" [class.selected]="member === selectedMember">
<!-- []に書かれたものはHTMLの属性値の指定 -->
<!-- class名を指定しています。class="selected"を追加するための書き方 -->
<!-- ngForで回しているmember変数を、選択済みのselectedMemberになる時、class="selected"を追加する -->
<spanclass="badge">{{member.id}}</span>
{{member.name}}
</li>
</ul>
<div *ngIf="selectedMember">
<h2>{{selectedMember.name}}</h2>
<div>
<label>id: </label>{{selectedMember.id}}
</div>
<div>
<label>name: </label>
<inputtype="text" [(ngModel)]="selectedMember.name"placeholder="名前">
</div>
</div>