web-dev-qa-db-fra.com

matériau 2 Complétion automatique: sélectionnez l'option

Je souhaite appeler une fonction lorsqu'une option est sélectionnée. Après quelques recherches, il me semble que je dois utiliser:

propriété optionSelections de MdAutocompleteTrigger

Dans la documentation: https://material.angular.io/components/component/autocomplete optionSelections Flux de sélections d’option autocomplete.

Je ne comprends pas cela, qu'est-ce qu'un flux, comment l'implémenter?

angularangular-material2md-autocomplete
24
Yoamb

Sur md-option, vous pouvez définir "onSelect"

<md-autocomplete #auto="mdAutocomplete">
    <md-option (onSelect)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>

Depuis la beta 3, la fonctionnalité a changé:

<md-autocomplete #auto="mdAutocomplete">
    <md-option (onSelectionChange)="callSomeFunction()" *ngFor="let state of states" [value]="state.name">{{ state.name }}</md-option>
</md-autocomplete>
35
Igor Janković

Le composant Material Autocomplete a sa propre sortie d'événement optionSelected:

Modèle: 

<mat-autocomplete (optionSelected)="onSelectionChanged($event)"> 
  <mat-option *ngFor="let item of myItems" [value]="item">
    {{ item }}
  </mat-option>
</mat-autocomplete>

Contrôleur: 

import { MatAutocompleteSelectedEvent } from '@angular/material';

// ...

onSelectionChanged(event: MatAutocompleteSelectedEvent) {
  console.log(event.option.value);
}

Voir: Documents API sur les matériaux angulaires - MatAutocomplete

45
Martin Schneider

Je ne pouvais pas obtenir la réponse "onSelect" avec le dernier angular (2.0.0-beta.3). Il n'a jamais été appelé.

Je constate maintenant que c'est:

  <md-option *ngFor="let item of item" [value]="item.name" (onSelectionChange)="myChangeFunc($event, item)">
    {{ item.name }}
  </md-option>

En d'autres termes, il semble s'appeler onSelectionChange maintenant. La documentation semble encore vague et continue de dire "Flux de sélections d’option de saisie semi-automatique", ce qui ne veut vraiment rien dire.

Voir aussi la réponse de Franceso. Cependant, dans la plupart des situations, vous devrez passer $ événement pour vérifier les informations sur l'événement.

9
PeterS

L'événement onSelectionChange a remplacé l'événement selected. Il est maintenant possible de reconnaître le moment où l'élément est sélectionné ou désélectionné.

Il faut passer un $event paramètre de la méthode cible pour différencier les deux cas, sinon md-autocomplete invoquera la méthode deux fois (une fois avec le nouvel élément sélectionné et une fois avec la valeur désélectionnée/précédente).
Ce serait bien si la documentation était un peu plus claire sur ces changements.

Ci-dessous, la façon d'obtenir uniquement l'événement "on select" :

Modèle

<md-autocomplete #panel="mdAutocomplete" [displayWith]="displayFn">
  <md-option (onSelectionChange)="selected($event, country)" 
             *ngFor="let country of filteredCountries | async" [value]="country">
    <div class="selector-elements">
        {{ country.name }}
      </div>
</md-option>

contrôleur

 selected(event: MdOptionSelectionChange, country: ICountry) {
    if (event.source.selected) {
        this.propagateChange(country);
    }
}
7
Francesco