angular 4 autoComplete material 中如何调用closePanel

Question

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();
 }
}

这不是完整的代码，但想法是在一个方法中调用 closePanel。 closePanel 被列为 https://material.angular.io/components/autocomplete/api 上的一种方法，但它无法正常工作。它说找不到方法。

也尝试过这种方法

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();
 }
}

Answer 1

如果不指定 read 选项，

Angular 默认从 html 元素读取 ElementRef。

所以

模板

<input #autoCompleteInput type="text" [matAutocomplete]="auto"/>

组件

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

这是演示此方法的 Plunker Example。

angular 4 autoComplete material 中如何调用closePanel

How do you call closePanel in angular 4 autoComplete material

angular-material2

angular