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

Question

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

опция свойстваВыборы MdAutocompleteTrigger

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

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

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

Answer 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

Answer 3

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

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

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

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

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

Answer 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);
    }
}