材料 2 自动完成：选择选项

Question

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

MdAutocompleteTrigger的

属性optionSelections

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

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

Answer 1

Material Autocomplete 组件有自己的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

Answer 2

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

Answer 3

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

我无法使用最新的角材料 (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。文档似乎仍然含糊不清，并继续说“自动完成选项选择流”，这实际上没有任何意义。

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