Angular 6 mat-select イベント変更について

Angular 6におけるmat-selectのchangeイベントの削除について

Angular 6から、mat-selectコンポーネントのchangeイベントが削除されました。これは、より明確かつ柔軟なイベントハンドリングを提供するためです。

以前のchangeイベントの使用方法

`` <mat-select (change)="onSelectionChange($event)"> <mat-option *ngFor="let option of options" [value]="option.value"> {{ option.label }} </mat-option> </mat-select>

onSelectionChange(event: MatSelectionChange) { console.log(event.value); } ``

Angular 6以降の代替イベントハンドリング

Angular 6以降では、次のイベントを使用してmat-selectの値の変化を検知します。

selectionChangeイベント

このイベントは、選択されたオプションが変更されたときに発火します。mat-selectのselectionChangeイベント出力にバインドして、選択された値を取得します。

<mat-select (selectionChange)="onSelectionChange($event)">
  </mat-select>

onSelectionChange(event: MatSelectionChange<any>) {
  console.log(event.value);
}

valueChangeイベント

mat-selectのvalueChangeイベントは、選択された値が変更されたときに発火します。選択された値を直接取得できます。

<mat-select (valueChange)="onValueChange($event)">
  </mat-select>

onValueChange(value: any) {
  console.log(value);
}

<mat-select (change)="onSelectionChange($event)">
  <mat-option *ngFor="let option of options" [value]="option.value">
    {{ option.label }}
  </mat-option>
</mat-select>

onSelectionChange(event: MatSelectionChange) {
  console.log(event.value);
}

この例では、mat-selectのchangeイベントにバインドし、選択されたオプションの値をコンソールに出力しています。

<mat-select (selectionChange)="onSelectionChange($event)">
  </mat-select>

onSelectionChange(event: MatSelectionChange<any>) {
  console.log(event.value);
}

<mat-select (valueChange)="onValueChange($event)">
  </mat-select>

onValueChange(value: any) {
  console.log(value);
}

代替イベントハンドリングの方法

<mat-select (selectionChange)="onSelectionChange($event)">
  </mat-select>

onSelectionChange(event: MatSelectionChange<any>) {
  console.log(event.value);
}

<mat-select (valueChange)="onValueChange($event)">
  </mat-select>

onValueChange(value: any) {
  console.log(value);
}

どちらのイベントを使用すべきか

• valueChangeイベントは、選択された値のみが必要な場合に使用します。例えば、選択された値を他のコンポーネントに渡したり、フォームのバリデーションに使用したりする場合です。