material 2 自动完成：select 选项

Question

我想在选择一个选项时调用一个函数。经过一番搜索后，我似乎必须使用：

属性 optionSelections of MdAutocompleteTrigger

在文档中： https://material.angular.io/components/component/autocomplete 选项选择自动完成选项选择流。

我不明白，什么是流，如何实现它？

Answer 1

在 md-option 你可以设置 "onSelect"

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

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

我无法使用最新的 angular material (2.0.0-beta.3) 得到答案 "onSelect"。它从未被调用过。

我现在发现它是：

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

也就是说现在好像叫onSelectionChange了。文档看起来仍然含糊不清，并继续说 "Stream of autocomplete option selections" 这实际上没有任何意义。

另请参阅 Franceso 的回答，但在大多数情况下，您需要传入 $event 以检查事件信息。

Answer 3

onSelectionChange 事件取代了 selected 事件。现在可以识别项目何时被选中或取消选中。

需要向目标方法传递一个 $event 参数以区分这两种情况，否则 md-autocomplete 将调用该方法两次（一次使用新选择的项目，一次使用 deselected/previous 值）。
如果文档能更清楚地说明这些更改，那就太好了。

以下如何仅获取 "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);
    }
}

Answer 4

Material 自动完成组件有自己的 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/autocomplete';

// ...

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

参见：Angular Material API Docs - MatAutocompleteSelectedEvent

material 2 自动完成：select 选项

material 2 Autocomplete: select option

md-autocomplete

angular-material2

angular