Angular 6 Метод смены выбора материала удален

129

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

angular angular6

— Фернандо Лакуметт
источник

350

Он изменил его с changeна selectionChange.

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

сейчас

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

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

— VtoCorleone
источник

26

Я так ненавижу это. Вчера я подумал, что это отличный день для обновления до Angular 6. И снова они изменили синтаксис.

— Луис Лавьери

17

Им нужно (changeEventChange)событие, чтобы определять, когда изменяется событие изменения.

— Stack

3

(selectionChange) теперь обновляется до (onSelectionChange).

— Debadatta

@Debadatta - Где ты это видел? Я все еще вижу selectionChange материал material.angular.io/components/select/api

— VtoCorleone

2

Все приведенные выше комментарии только подчеркивают, почему имеет смысл придерживаться подхода с реактивными формами, согласно моему ответу ниже, где это возможно. Кстати, я не думаю, что комментарии очень справедливы, потому что ребята из Angular Material проделывают потрясающую работу, и мы получаем ее бесплатно.

— Джозеф Симпсон,

24

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

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

— Джозеф Симпсон
источник

1

Стоит отметить, что при использовании вышеупомянутого подхода с реактивными формами вы менее привязаны к пользовательскому интерфейсу и с меньшей вероятностью столкнетесь с проблемами по мере развития этой инфраструктуры пользовательского интерфейса

— Джозеф Симпсон

Мне это понравилось, я попробую.

— userx

Просто обратите внимание, что если вам нужно .updateValueAndValidityуправление, не забудьте пройти { emitEvent: false }, чтобы избежать RangeError: Maximum call stack size exceeded. С другой стороны, спасибо за подсказку (+1), она привела меня к тому, что мне было нужно.

— dcg

Стоит ли отказываться от подписки в ngOnDestroy, если я буду следовать подходу?

— ohidano

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

— Джозеф Симпсон

7

Для:

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
}

— Кайлас
источник

3

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

<mat-select (valueChange)="someFunction()">

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

— silverhash
источник

Я использую шаблонную форму и работал со мной, используя следующее:

<mat-select placeholder="Select an option" [(ngModel)]="project.managerId" name="managerId" required   (selectionChange)="fillComanager(project.managerId)">   <mat-option *ngFor="let manager of managers" [value]="manager.id"> 	{{ manager.name }}   </mat-option> </mat-select>

— pcdro

1

У меня сегодня проблема с 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",

— lingar
источник