web-dev-qa-db-ja.com

Angular 4のmd-selectのonselectedイベント

Md-selectを使用して値を選択すると、TypeScriptで関数を呼び出したいです。材料設計でこの目的に使用されるプロパティは何ですか？

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>
angularangular-materialangular-material2
26
Karthik Kumar

材料バージョン> = 6

(selectionChange)イベントをmat-selectで使用します。

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

イベントメソッドでは、$event.valueには現在選択されている[value]が含まれます。 公式ドキュメント への参照。

@Output（）selectionChange：EventEmitter <MatSelectChange>

選択した値がユーザーによって変更されたときに発行されるイベント。

Stackblitz Demo へのリンクです。

材料バージョン<6の場合

(change)出力イベントを使用します。

<md-select placeholder="State" (change)="someMethod()">
  <md-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </md-option>
</md-select>

別の方法は、(onSelectionChange)で<md-option>イベントを使用することです。

<md-select placeholder="State">
  <md-option *ngFor="let state of states" [value]="state.code" 
             (onSelectionChange)="anotherMethod($event, state)">
    {{ state.name }}
  </md-option>
</md-select>

Stackblitz Demo へのリンク。

86
Faisal

または、(click)でmat-optionイベントを使用することもできます。クリックイベントは、既に選択されているオプションが再び選択されたときにも発生します。このような場合、(change)または(selectionChange)は起動しません。

3
Maurice

最新バージョンの資料を使用してソリューションを検索するユーザーに追加するだけで、@ Faisalによって提案された回答でmdをmatに変更します。

<mat-select placeholder="State" (change)="someMethod()">
  <mat-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </mat-option>
</mat-select>
3
Manoj Kumar Desai

これらの種類のことに関して、ドキュメントは非常にオープンです。

https://material.angular.io/components/select/api

@Output()
change
Event emitted when the selected value has been changed by the user.

<md-select (change)="wasThatSoHard($event)"></md-select>
1
Carsten