Angular 4中md-select中的onselected事件

Question

我想在使用md-select选择值时在typescript中调用函数.在材料设计中用于此目的的属性是什么？

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

Answer 1

材料版本更新> = 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>

用户更改选定值时发出的事件.

这是一个工作更新演示的链接.

原始答案

使用(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>

链接到工作演示.

Answer 2

只是为使用最新版本材料并搜索解决方案的人添加，在 @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>

(selectionChange)对于大于 6 的材质版本，请使用change

Answer 3

或者，您可以只在(click)上使用事件mat-option。当再次选择已选择的选项时，也会触发 click 事件。(change)或者(selectionChange)在这种情况下不会触发。