How do you call closePanel in angular 4 autoComplete material

问题

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

It is not the complete code but the idea is to call closePanel inside a method. closePanel is listed as a method on https://material.angular.io/components/autocomplete/api but it fails to work. It says method not found.

tried this approach too

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

回答1:

Angular reads ElementRef by default from html element if you don't specify read option.

template

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

component

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

Here is the Plunker Example that demonstrates this approach.

来源：https://stackoverflow.com/questions/45257481/how-do-you-call-closepanel-in-angular-4-autocomplete-material

标签

angular

angular-material2