материал 2 Автозаполнение: выберите опцию

Я хочу вызвать функцию, когда выбран параметр. После некоторого поиска кажется, что я должен использовать:

свойство propertySelections of MdAutocompleteTrigger

В документации: https://material.angular.io/components/component/autocomplete optionSelections Поток параметров автозаполнения.

Я не понимаю, что такое поток, как это реализовать?

Ответ 1

На опции md вы можете установить "onSelect"

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

Начиная с бета 3, функциональность изменилась:

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

Ответ 2

Компонент "Автокомпонент материала" имеет свой собственный optionSelected выход события:

Шаблон:

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

контроллер:

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

// ...

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

См. Документы API с угловым материалом - MatAutocomplete

Ответ 3

Я не смог получить ответ "onSelect" с последним угловым материалом (2.0.0-beta.3). Его никогда не называли.

Теперь я нахожу, что это:

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

Другими словами, он теперь называется onSelectionChange. Документы все еще кажутся расплывчатыми и продолжают говорить "Поток вариантов выбора автозаполнения", что на самом деле ничего не значит.

См. Также ответ Franceso, однако для большинства ситуаций вам нужно пройти в $ event, чтобы проверить информацию о событии.

Ответ 4

Событие onSelectionChange заменило selected событие, так как теперь можно различать событие, когда элемент выбран или не выбран.

Для того, чтобы различать два случая, необходимо передать параметр $event, иначе md-autocomplete вызовет метод дважды (один раз с новым выбранным элементом и один раз с невыделенным/предыдущим значением). Было бы неплохо, однако, что документация будет немного более понятна в отношении этих изменений.

Ниже, как получить только событие "on select":

шаблон

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

контроллер

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