Se eliminó el método de cambio de selección de tapete de material de Angular 6

129

En Angular Material Design 6, se eliminó el método (cambiar). No puedo encontrar cómo reemplazar el método de cambio para ejecutar el código en el componente cuando el usuario cambia la selección ¡Gracias!

angular angular6

— Fernando Lacoumette
fuente

348

La cambió de changea selectionChange.

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

es ahora

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

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

— VtoCorleone
fuente

26

Odio tanto esto. Ayer pensé que era un día genial para actualizar a Angular 6. Una vez más, cambiaron la sintaxis.

— Luis Lavieri

17

Necesitan un (changeEventChange)evento para detectar cuándo cambia el evento de cambio.

— Stack Underflow

3

(selectionChange) ahora se actualiza a (onSelectionChange).

— Debadatta

@Debadatta - ¿Dónde viste esto? Todavía veo selectionChange material.angular.io/components/select/api

— VtoCorleone

2

Todos los comentarios anteriores solo resaltan aún más por qué tiene sentido apegarse a un enfoque de formas reactivas, según mi respuesta a continuación, cuando sea posible. En una nota al margen, no creo que los comentarios sean muy justos porque los chicos de Angular Material hacen un trabajo increíble y lo obtenemos gratis.

— Joseph Simpson

24

Si está utilizando formularios reactivos, puede escuchar los cambios en el control de selección así.

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

— Joseph Simpson
fuente

1

Vale la pena señalar que al usar el enfoque de formularios reactivos anterior, está menos atado a la interfaz de usuario y es menos probable que tenga problemas a medida que evoluciona el marco de la interfaz de usuario

— Joseph Simpson

Me gustó esto, lo intentaré.

— userx

Solo tenga en cuenta aquí que si necesita .updateValueAndValidityel control, no olvide pasar { emitEvent: false }para evitar RangeError: Maximum call stack size exceeded. Por otro lado, gracias por la pista (+1), me llevó a lo que necesitaba.

— dcg

¿Debo darme de baja en ngOnDestroy si sigo el enfoque?

— ohidano

Siempre debe limpiar sus suscripciones para evitar pérdidas de memoria y comportamientos inesperados.

— Joseph Simpson

7

Por:

1) mat-select (selectionChange)="myFunction()"funciona en angular como:

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 selección html simple (change)="myFunction()"funciona en angular como:

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
fuente

3

Para mí (selectionChange)y lo sugerido (onSelectionChange)no funcionó y no lo estoy usando ReactiveForms. Lo que terminé haciendo fue usar el (valueChange)evento como:

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

Y esto funcionó para mi

— silverhash
fuente

Estoy usando un formulario de plantilla, y me funcionó usando lo siguiente:

<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

Hoy tengo este problema con mat-option-group. Lo que me resolvió el problema es usar en otro evento proporcionado de mat-select: valueChange

Pongo aquí un pequeño código para entenderlo:

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

Versión del tapete:

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

— lingar
fuente