web-dev-qa-db-fra.com

événement sélectionné dans md-select dans Angular 4

Je voudrais appeler une fonction dans TypeScript sur le choix d'une valeur à l'aide de md-select. Quelle est la propriété utilisée à cette fin dans la conception des matériaux?

   <md-select placeholder="State">
       <md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}
   </md-option>

angularangular-material2
11
Karthik Kumar

Mise à jour de la version du matériel> = 6

Utilisez l'événement (selectionChange) sur mat-select. 

<mat-form-field>
    <mat-select placeholder="State" (selectionChange)="someMethod($event.value)">
        <mat-option *ngFor="let state of states" [value]="state.value">
            {{ state.viewValue }}
        </mat-option>
    </mat-select>
</mat-form-field>

Dans la méthode de l'événement, $event.value contient le [value] actuellement sélectionné. Référence à la documentation officielle .

@Output () selectionChange: EventEmitter <MatSelectChange>

Evénement émis lorsque la valeur sélectionnée a été modifiée par l'utilisateur.

Voici un lien vers démonstration de travail mise à jour .

Réponse originale

Utilisez l'événement de sortie (change). 

<md-select placeholder="State" (change)="someMethod()">
  <md-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </md-option>
</md-select>

Une autre méthode consiste à utiliser l'événement (onSelectionChange) sur <md-option>:

<md-select placeholder="State">
  <md-option *ngFor="let state of states" [value]="state.code" 
             (onSelectionChange)="anotherMethod($event, state)">
    {{ state.name }}
  </md-option>
</md-select>

Lien vers démo de travail .

45
Faisal

Ajoutez simplement pour les personnes utilisant la dernière version du matériel et à la recherche de la solution, changez md en mat dans la réponse suggérée par @Faisal.

<mat-select placeholder="State" (change)="someMethod()">
  <mat-option *ngFor="let state of states" [value]="state.value">
    {{ state.viewValue }}
  </mat-option>
</mat-select>
3
Manoj Kumar Desai

Sinon, vous pouvez simplement utiliser l'événement (click) sur mat-option. L'événement clic est également déclenché lorsqu'une option déjà sélectionnée est à nouveau sélectionnée. (change) ou (selectionChange) ne se déclenche pas dans un tel cas.

1
Maurice

La documentation est très ouverte sur ce genre de choses:

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

@Output()
change
Event emitted when the selected value has been changed by the user.

<md-select (change)="wasThatSoHard($event)"></md-select>
1
Carsten