Kątowa 6 Usunięto metodę zmiany wyboru mat materiału

129

W Angular Material Design 6 metoda (zmiana) została usunięta. Nie mogę znaleźć sposobu na zastąpienie metody change, aby wykonać kod w komponencie, gdy użytkownik zmieni wybór. Dzięki!

angular angular6 Fernando Lacoumette
źródło

Odpowiedzi:

349

Zmieniono go z changena selectionChange. 

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

jest teraz

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

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

VtoCorleone
źródło
26
Tak bardzo tego nienawidzę. Wczoraj pomyślałem, że to fajny dzień na aktualizację do Angular 6. Po raz kolejny zmienili składnię.
Luis Lavieri,
17
Potrzebują (changeEventChange)zdarzenia, aby wykryć zmianę zdarzenia.
Stack Underflow
3
(selectionChange) jest teraz zaktualizowany do (onSelectionChange).
Debadatta,
@Debadatta - Gdzie to widziałeś? Nadal widzę selectionChange materiał.angular.io
components
2
Wszystkie powyższe komentarze tylko dodatkowo podkreślają, dlaczego warto trzymać się podejścia reaktywnego, zgodnie z moją odpowiedzią poniżej, jeśli to możliwe. Na marginesie, nie sądzę, aby komentarze były zbyt uczciwe, ponieważ faceci z Angular Material wykonują niesamowitą robotę i dostajemy to za darmo.
Joseph Simpson,
24

Jeśli korzystasz z formularzy reaktywnych, możesz nasłuchiwać zmian w kontrolce zaznaczania, w ten sposób ... 

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
Joseph Simpson
źródło
1
Warto zauważyć, że korzystając z powyższego podejścia do formularzy reaktywnych, jesteś mniej przywiązany do interfejsu użytkownika i mniej prawdopodobne jest, że będziesz mieć problemy w miarę ewolucji struktury UI
Joseph Simpson
Podobało mi się to, spróbuję.
userx
Pamiętaj tylko, że jeśli potrzebujesz .updateValueAndValiditykontroli, nie zapomnij przejść { emitEvent: false }, aby uniknąć RangeError: Maximum call stack size exceeded. Z drugiej strony dzięki za podpowiedź (+1), doprowadziło mnie to do czego potrzebowałem.
dcg
Czy powinienem zrezygnować z subskrypcji w ngOnDestroy, jeśli zastosuję się do tego podejścia?
ohidano
Zawsze musisz wyczyścić swoje subskrypcje, aby uniknąć wycieków pamięci i nieoczekiwanego zachowania.
Joseph Simpson
7

Dla:

1) mat-select (selectionChange)="myFunction()"działa pod kątem:

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) Prosty wybór html (change)="myFunction()"działa w trybie kątowym jako:

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
}
Kailas
źródło
3

U mnie (selectionChange)i sugerowane (onSelectionChange)nie zadziałały i nie używam ReactiveForms. Skończyło się na tym, że wykorzystałem to (valueChange)wydarzenie:

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

I to zadziałało dla mnie

silverhash
źródło
Używam formularza szablonu i pracowałem dla mnie, używając następującego: <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

Mam dzisiaj ten problem z mat-opcja-grupa. Tym, co rozwiązało problem, jest użycie w innym podanym przypadku mat-select: valueChange

Umieściłem tutaj mały kod do zrozumienia: 

<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>

Wersja maty:

"@ angular / material": "^ 6,4.7",

lingar
źródło