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

Question

我想在选择一个选项时调用一个函数.经过一些搜索,似乎我必须使用:

属性选项MdAutocompleteTrigger的 选择

在文档中: 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';

// ...

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

请参阅:Angular Material API文档 - MatAutocomplete

Answer 2

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