Кутовий 6 Метод зміни матового вибору матеріалу видалено

129

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

angular angular6

— Фернандо Лакомет
джерело

346

Змінено його з 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

(selectChange) тепер оновлено до (onSelectionChange).

— Дебадатта

@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, якщо я дотримуюся підходу?

— охідано

Завжди потрібно чистити підписки, щоб уникнути витоку пам'яті та несподіваної поведінки.

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

7

Для:

1) матовий вибір (selectionChange)="myFunction()" працює у кутку як:

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()" працює у кутовій формі:

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()">

І це працювало на мене

— сріблястий
джерело

Я використовую форму шаблону, і працював зі мною, використовуючи наступне:

<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. Те, що вирішило мені проблему, використовується в інших передбачених подіях 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",

— лінгар
джерело