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!

angular angular6

— Fernando Lacoumette
fonte

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

— VtoCorleone
fonte

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 ... })

— Joseph Simpson
fonte

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
}

— Kailas
fonte

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

— silverhash
fonte

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

— lingar
fonte