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

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