如何在angular 4 autoComplete材质中调用closePanel 从'@angular/material'导入{MdAutocomplete}； @组成部分({ 模板：' 一些选择 ' }) 导出类自动完成{ @ViewChild（'autoComplete'）autoComplete:MdAutocomplete； closeAuto（）{ this.autoComplete.closePanel（）； } }

这不是完整的代码，但其思想是在方法内部调用closePanel。closePanel作为上的方法列出，但它无法工作。它说找不到方法

我也尝试过这种方法

import { MdAutocomplete } from '@angular/material';

@Component({
 template:'
             <input type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoComplete') autoComplete: MdAutocomplete;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

从'@angular/material'导入{mdautocompletettrigger}；
@组成部分({
模板：'
一些选择
'
})
导出类自动完成{
@ViewChild（“自动完成输入”）自动完成：MdAutocompleteTrigger；
closeAuto（）{
this.autoComplete.closePanel（）；
}
}

如果未指定

read

选项，则默认情况下从html元素读取

ElementRef

所以

模板

import { MdAutocompleteTrigger } from '@angular/material';

@Component({
 template:'
             <input #autoCompleteInput type="text" [mdAutocomplete]="auto"/>
             <md-autocomplete #auto="mdAutocomplete" #autoComplete>
             <md-option>
               Some Options
             </md-option>
          </md-autocomplete>'
})

export class AutoComplete {
 @ViewChild('autoCompleteInput') autoComplete: MdAutocompleteTrigger;

 closeAuto() {
   this.autoComplete.closePanel();
 }
}

---

下面是演示这种方法的示例。

我遇到了许多似乎不相关的方法和输入。我建议在Günter Zöchbauer的《github回购协议》中对

read

属性进行解释。基本上，我们强力键入一个元素，否则会显示为

ElementRef

，只需注意，MdAutocompleteTrigger现在是MatAutocompleteTrigger。这也有助于我在定位组件时打开焦点下拉列表：

This.autoComplete.\u onChange（“”）；this.autoComplete.openPanel（）如果使用多个具有相同标记的自动完成，请使用
@ViewChildren（MatAutocompleteTrigger）autoComplete:QueryList并循环它。我使用输入的id进行匹配<代码>如果（这个.autoComplete[''u results'][i][''u element']['nativeElement']['id']===\u fieldid）{
回答得很好。虽然Angular文档提到了这个方法，但是没有使用它的例子。这是Angular文档的一个常见问题，一般来说。
<input #autoCompleteInput type="text" [matAutocomplete]="auto"/>

@ViewChild('autoCompleteInput', { read: MatAutocompleteTrigger }) 
autoComplete: MatAutocompleteTrigger;