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

Question

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

MdAutocompleteTrigger的 属性optionSelections

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

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

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 文档 - MatAutocompleteSelectedEvent

Answer 2

在 md 选项上，您可以设置“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 3

我无法使用最新的角材料（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 以检查事件信息。

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