Méthode de changement de sélection de tapis angulaire 6 supprimée

129

Dans Angular Material Design 6, la méthode (change) a été supprimée. Je ne trouve pas comment remplacer la méthode de changement pour exécuter du code dans le composant lorsque l'utilisateur change la sélection Merci!

angular angular6 Fernando Lacoumette
la source

Réponses:

349

Le changé de changeà selectionChange. 

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

est maintenant

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

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

VtoCorleone
la source
26
Je déteste tellement ça. Hier, j'ai pensé que c'était une journée cool pour passer à Angular 6. Encore une fois, ils ont changé la syntaxe.
Luis Lavieri
17
Ils ont besoin d'un (changeEventChange)événement pour détecter quand l'événement de modification change.
Stack Underflow le
3
(selectionChange) est maintenant mis à jour en (onSelectionChange).
Debadatta le
@Debadatta - Où avez-vous vu ça? Je vois encore selectionChange material.angular.io/components/select/api
VtoCorleone
2
Tous les commentaires ci-dessus ne font que souligner davantage pourquoi il est logique de s'en tenir à une approche de formulaires réactifs, selon ma réponse ci-dessous, lorsque cela est possible. Sur une note secondaire, je ne pense pas que les commentaires soient très justes parce que les gars de Angular Material font un travail incroyable et nous l'obtenons gratuitement.
Joseph Simpson
24

Si vous utilisez des formulaires réactifs, vous pouvez écouter les modifications apportées au contrôle de sélection comme suit. 

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
Joseph Simpson
la source
1
Il convient de noter qu'en utilisant l'approche des formulaires réactifs ci-dessus, vous êtes moins lié à l'interface utilisateur et moins susceptible d'avoir des problèmes à mesure que ce cadre d'interface utilisateur évolue
Joseph Simpson
J'ai aimé cela, je vais essayer.
userx
Juste à noter ici que si vous avez besoin de .updateValueAndValidityla commande n'oubliez pas de passer { emitEvent: false }pour éviter RangeError: Maximum call stack size exceeded. Par contre merci pour l'indice (+1), cela m'a conduit à ce dont j'avais besoin.
dcg
Dois-je me désinscrire dans le ngOnDestroy si je suis l'approche?
ohidano
Vous devez toujours nettoyer vos abonnements pour éviter les fuites de mémoire et les comportements inattendus.
Joseph Simpson
7

Pour:

1) mat-select (selectionChange)="myFunction()"fonctionne en angulaire comme:

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 sélection html simple (change)="myFunction()"fonctionne en angulaire comme:

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
la source
3

Pour moi (selectionChange)et le suggéré (onSelectionChange)n'a pas fonctionné et je ne l'utilise pas ReactiveForms. Ce que j'ai fini par faire, c'était d'utiliser l' (valueChange)événement comme:

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

Et cela a fonctionné pour moi

silverhash
la source
J'utilise un formulaire modèle, et j'ai travaillé pour moi en utilisant ce qui suit: <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

J'ai ce problème aujourd'hui avec mat-option-group. La chose qui m'a résolu le problème est d'utiliser dans un autre événement fourni de mat-select: valueChange

J'ai mis ici un petit code pour comprendre: 

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

Version du tapis:

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

lingar
la source