有没有办法检测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