web-dev-qa-db-ja.com

材料2オートコンプリート：オプションを選択

オプションが選択されたときに関数を呼び出したい。いくつかの検索の後、私は使用する必要があるようです：

プロパティoptionSelectionsofMdAutocompleteTrigger

ドキュメント内： https://material.angular.io/components/component/autocompleteoptionSelectionsオートコンプリートオプション選択のストリーム。

私はそれを理解していない、ストリームとは何ですか、これを実装する方法は？

angularangular-material2md-autocomplete
24
Yoamb

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>

ベータ3以降、機能が変更されました：

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

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 Docs-MatAutocomplete

45
Martin Schneider

最新のangularマテリアル（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を渡す必要があります。

9
PeterS

onSelectionChangeイベントがselectedイベントに置き換わりました。これで、アイテムが選択または選択解除されたことを認識できるようになりました。

$eventパラメーターをターゲットメソッドに渡して2つのケースを区別する必要があります。そうしないと、md-autocompleteはメソッドを2回呼び出します（新しい選択項目で1回、選択解除/前の値で1回）。
これらの変更についてドキュメントがもう少し明確になればいいのですが。

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