如何在angular 4 autoComplete材质中调用closePanel [英] 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();
 }
}

这不是完整的代码，但其想法是在方法内部调用closePanel. closePanel作为 https://material.angular.io/components/autocomplete/api ，但无法正常工作.它说找不到方法.

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.

也尝试过这种方法

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

推荐答案

默认情况下，如果未指定read选项，Angular将从html元素读取ElementRef.

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

所以

模板

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

组件

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

这是 Plunker示例 ，它演示了这种方法

Here is the Plunker Example that demonstrates this approach.

这篇关于如何在angular 4 autoComplete材质中调用closePanel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！