Material2を使用するMdAutocompleteコンポーネント - onselectイベントを使用する方法

Question

Material2ベータ2に新しいオートコンプリートコンポーネントを使用しようとしています。 コンポーネントとオプションメニューをレンダリングしても問題ありませんが、私は

<md-input-container dividerColor="accent" [mdTooltip]="hint" mdTooltipPosition="above"> 
    <input mdInput [formControl]="selectedInput" [mdAutocomplete]="auto" placeholder="text"> 
</md-input-container> 
<md-autocomplete #auto="mdAutocomplete"> 
    <md-option *ngFor="let option of filteredOptions | async" [value]="option">{{ option }}</md-option> 
</md-autocomplete> 

私の最終目標は、私のコンポーネントで、ユーザーがリストから値を選択するたびに位置して変数と呼ばれるselectedItemsのを移入することで、リストからオプションを選択すると、アクションをプリフォームすること（複数回選択することができます）。

MdAutocompleteTriggerとは関係がありますが、一緒に接続することはできません。

Answer 1

UPDATEよりよい解決策があります

：

あなたはこのためdisplayWith使用することができます

<md-autocomplete #appSearch="mdAutocomplete"> 
    <md-option *ngFor="let app of apps" [value]="app.name" (onSelectionChange)="onAppSelect(app)"> 
    {{ app.name }} 
    </md-option> 
</md-autocomplete> 

OLD：md-optionさんonSelectionChangeイベントを使用して

<md-autocomplete 
    [displayWith]="displayFnProject.bind(this)" 
    #projectsAutoComplete="mdAutocomplete" 
> 

~bind機能は必要ではありませんが、私の例ではコンポーネント自体にアクセスしたいと考えていました。 :)

// somethig is selected !! 
    displayFnProject(prj: any) { 
    console.log('selected', prj); 

    this.filteredOptions.next([]); // clear suggestions -> we do not want to show options if we already selected something ! :) 
    return prj ? prj.no : ''; // decide here what you want to display in that input-element ! 
    } 

ライブデモ：新しいバージョンでhttps://plnkr.co/edit/gzjx0ZS9wvw49LWY7THx?p=preview

Answer 2

、オートコンプリートコンポーネントが出力optionSelectedを有しています。

<form> 
    <mat-form-field> 
     <input matInput placeholder="Select" [matAutocomplete]="auto" [formControl]="input"> 

     <mat-autocomplete (optionSelected)="someFn()" #auto="matAutocomplete"> 
      <mat-option *ngFor="let option of options" [value]="option"> 
       <span>{{option}}</span> 
      </mat-option> 
     </mat-autocomplete> 
    </mat-form-field> 
</form> 

入力

public input: FormControl = new FormControl(''); 

public someFn(): void { 
    const value = this.input.value; 
}