有沒有辦法檢測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