Angolare 6 Metodo di cambio selezione materassino materiale rimosso


129

In Angular Material Design 6, il metodo (modifica) è stato rimosso. Non riesco a trovare come sostituire il metodo di modifica per eseguire il codice nel componente quando l'utente cambia la selezione Grazie!

Risposte:


348

L'hanno cambiato da changea selectionChange.

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

è ora

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

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


26
Lo odio così tanto. Ieri ho pensato che fosse una bella giornata per l'aggiornamento ad Angular 6. Ancora una volta, hanno cambiato la sintassi.
Luis Lavieri

17
Hanno bisogno di un (changeEventChange)evento per rilevare quando cambia l'evento di modifica.
Stack Underflow

3
(selectionChange) è ora aggiornato a (onSelectionChange).
Debadatta

@Debadatta - Dove l'hai visto? Vedo ancora selectionChange material.angular.io/components/select/api
VtoCorleone

2
Tutti i commenti sopra evidenziano solo ulteriormente perché ha senso attenersi a un approccio di forme reattive, come da mia risposta di seguito, ove possibile. In una nota a margine, non penso che i commenti siano molto onesti perché i ragazzi di Angular Material fanno un lavoro straordinario e lo riceviamo gratuitamente.
Joseph Simpson,

24

Se stai utilizzando moduli reattivi, puoi ascoltare le modifiche al controllo di selezione in questo modo.

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

1
Vale la pena notare che utilizzando l'approccio delle forme reattive sopra si è meno legati all'interfaccia utente e meno probabilità di avere problemi man mano che il framework dell'interfaccia utente si evolve
Joseph Simpson

Mi è piaciuto, ci proverò.
userx

Solo per notare qui che se hai bisogno .updateValueAndValiditydel controllo non dimenticare di passare { emitEvent: false }per evitare RangeError: Maximum call stack size exceeded. D'altra parte grazie per il suggerimento (+1), mi ha portato a ciò di cui avevo bisogno.
DCG

Devo annullare l'iscrizione a ngOnDestroy se seguo l'approccio?
ohidano il

Devi sempre ripulire le tue sottoscrizioni per evitare perdite di memoria e comportamenti imprevisti.
Joseph Simpson

7

Per:

1) mat-select (selectionChange)="myFunction()"funziona in angolare come:

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) La semplice selezione html (change)="myFunction()"funziona in angolare come:

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

Per me (selectionChange)e il suggerito (onSelectionChange)non ha funzionato e non lo sto usando ReactiveForms. Quello che ho finito per fare è stato utilizzare l' (valueChange)evento come:

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

E questo ha funzionato per me


Sto usando un modulo modello e ho lavorato con me usando quanto segue: <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

Ho questo problema oggi con mat-option-group. La cosa che mi ha risolto il problema è l'utilizzo in un altro evento fornito di mat-select: valueChange

Metto qui un piccolo codice per capire:

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

Versione mat:

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.