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
source

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