md-autocomplete material2 + angular2上の選択パネルが表示されているかどうかを検出する方法はありますか？

Question

パネルが表示されているかどうかを検出しようとしていますが、ドキュメントからは、どのプロパティを使用して正しいイベントがトリガーされるのかを正しく知ることができません。

誰でも助けることができれば、ありがとう。

Answer 1

md-autocompleteは、showPanelというプロパティを持っています。オートコンプリートの#参照を使用してshowPanelの値を返すことができます。

入力フィールドのkeyupイベントごとに、showPanelの値をチェックし、それが動作するかどうかを確認するために配列にプッシュします。

HTML：

<md-input-container> 
    <input mdInput placeholder="State" 
     [mdAutocomplete]="auto" 
     [formControl]="stateCtrl" 
     (keyup)="checkPanel(auto.showPanel)"> 
</md-input-container> 

<md-autocomplete #auto="mdAutocomplete"> 
    <md-option *ngFor="let state of filteredStates | async" [value]="state"> 
    {{ state }} 
    </md-option> 
</md-autocomplete> 

<p></p> 

<div style="margin-top: 300px"> 
    <span>Is panel open at keyup:</span> 
    <div *ngFor="let x of flags; let i = index"> 
    keyup {{i+1}}: {{x}} 
    </div> 
</div> 

TS：

checkPanel(val){ 
    this.flags.push(val); 
} 

Plunker demo