onselected event в md-select в Angular 4

Я хотел бы вызвать функцию в машинописном тексте при выборе значения с помощью md-select. Каково свойство, используемое для этой цели в материальном дизайне?

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

Ответ 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>

Событие генерируется, когда выбранное значение было изменено пользователем.

Вот ссылка на демонстрацию Stackblitz.

Для версии материала <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.

Ответ 2

Просто добавив для людей, использующих самую последнюю версию материала и ищущих решение, измените md на мат в ответе, предложенном @Faisal.

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

Ответ 3

Кроме того, вы можете просто использовать событие (click) по mat-option. Событие клика также запускается, когда выбранный вариант снова выбран. (change) или (selectionChange) не будет срабатывать в этом случае.

Ответ 4

Документация очень открыта в отношении таких вещей:

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>