angular - example - mat-autocomplete

autocompletar material 2: seleccionar opción

Question

Quiero llamar a una función cuando se selecciona una opción. Después de algunas búsquedas parece que tengo que usar:

opción de propiedadSelecciones de MdAutocompleteTrigger

En la documentación: https://material.angular.io/components/component/autocomplete optionSelections Secuencia de selecciones de opciones de autocompletar.

No entiendo eso, ¿qué es un flujo, cómo implementar esto?

Answer 1

El componente Material Autocomplete tiene su propia salida de evento optionSelected :

Modelo:

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

Controlador:

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

// ...

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

Consulte: Documentos API de material angular - MatAutocomplete

Answer 2

El evento onSelectionChange reemplazó al evento selected , ya que ahora es posible diferenciar entre el evento cuando el elemento está seleccionado o no seleccionado.

Es necesario pasar un parámetro de $event al método de destino para diferenciar entre los dos casos, de lo contrario md-autocomplete invocará el método dos veces (una vez con el nuevo elemento seleccionado y una vez con el valor no seleccionado / anterior). Sin embargo, sería bueno que la documentación fuera un poco más clara sobre estos cambios.

A continuación, cómo obtener solo el evento "on select":

Modelo

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

Controlador

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

Answer 3

En la opción md puede configurar "onSelect"

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

Desde la beta 3, la funcionalidad ha cambiado:

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

Answer 4

No pude obtener la respuesta "onSelect" con el último material angular (2.0.0-beta.3). Nunca fue llamado.

Estoy encontrando ahora que es:

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

En otras palabras, parece que se llama onSelectionChange ahora. Los documentos aún parecen vagos y continúan diciendo "Secuencia de selecciones de opciones de autocompletado" que realmente no significa nada.

También vea la respuesta de Franceso, sin embargo, para la mayoría de las situaciones, deberá pasar el evento $ para verificar la información del evento.