Угловой 6 Материал коврик выбран метод изменения удален

Question

В Angular Material Design 6 метод (изменение) был удален. Я не могу найти, как заменить метод изменения, чтобы выполнить код в компоненте, когда пользователь выбрал изменение. Спасибо!

Answer 1

Изменил это из change в selectionChange,

<mat-select (change)="doSomething($event)">

сейчас

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

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

Answer 2

Если вы используете "Реактивные формы", вы можете прослушать изменения в элементе управления select следующим образом.

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })

Answer 3

За:

1) mat-select (selectionChange)="myFunction()" работает в angular как:

sample.component.html

 <mat-select placeholder="Select your option" [(ngModel)]="option" name="action" 
      (selectionChange)="onChange()">
     <mat-option *ngFor="let option of actions" [value]="option">
       {{option}}
     </mat-option>
 </mat-select>

sample.component.ts

actions=['A','B','C'];
onChange() {
  //Do something
}

2) Простой выбор HTML (change)="myFunction()" работает в angular как:

sample.component.html

<select (change)="onChange()" [(ngModel)]="regObj.status">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

sample.component.ts

onChange() {
  //Do something
}

Answer 4

Для меня (selectionChange) и предложенный (onSelectionChange) не работал, и я не использую ReactiveForms, В итоге я использовал (valueChange) событие как:

<mat-select (valueChange)="some function()">

И это сработало для меня

Answer 5

У меня сегодня проблема с mat-option-group. То, что решило мне проблему, используется в другом предоставленном событии mat-select: valueChange

Я поместил сюда небольшой код для понимания:

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)"> <!-- (valueChange)="doSomething1(choosedValue.value)" instead of (change) or other event-->

    <mat-option >-- None --</mat-option>
      <mat-optgroup  *ngFor="let group of filterData" [label]="group.viewValue"
                    style = "background-color: #0c5460">
        <mat-option *ngFor="let option of group.options" [value]="option.value">
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
  </mat-select>
</mat-form-field>

Версия коврика:

"@ angular / material": "^6.4.7",

Answer 6

Для меня ...(click)="myFunction()"...работал; ничего сверху.

Answer 7

<mat-select (change)="doSomething($event)">

теперь <mat-select (selectionChange)="doSomething($event)">