如何在angular 4 autoComplete材质中调用closePanel

前端之家收集整理的这篇文章主要介绍了如何在angular 4 autoComplete材质中调用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();
 }
}

它不是完整的代码,但想法是在方法调用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();
 }
}
如果未指定read选项,Angular默认从html元素读取ElementRef.

所以

模板

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

零件

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

这是展示这种方法Plunker Example.

原文链接:https://www.f2er.com/angularjs/142212.html

猜你在找的Angularjs相关文章