角材料2自动完成异步答案

【问题标题】：angular material 2 autocomplete asynchronous角材料2自动完成异步
【发布时间】：2017-09-07 09:49:32
【问题描述】：

我有一个角度 4 和一个角度材料 2。我想使用自动完成功能。在第一个版本中，自动完成的角材料支持不对称工作。

https://material.angularjs.org/latest/api/directive/mdAutocomplete#asynchronous-results

一切都很棒而且很舒服。在第二个版本中，我试图找到一个指南，但没有找到任何东西。

Angular 2 materials, autocomplete with remote data

How to use correctly autocomplete component from Angular2 MaterialDesign?

不算。他们转向 onInit 服务。我需要点击它，就像在第一个版本中一样。如何做到这一点？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

我不确定您所说的“他们转向 onInit 服务”是什么意思？如果要在 click 事件上进行调用，则将代码块移动到在 click 事件上调用的函数。您在问题中列出的那些示例，因为.startWith(null) 这一行，请拨打onInit，以便用户在单击输入字段时立即看到数据。

这是一个例子：

html:

<md-input-container>
    <input mdInput [mdAutocomplete]="auto"
           placeholder="Select Name"
           [formControl]="myCtrl" 
           (click)="getData()">
</md-input-container>
...
...
...

ts：

myCtrl: FormControl;

  filteredItems: any;

  items;

  constructor(private dataService: DataService) {
    this.myCtrl = new FormControl();
  }

  ngOnInit(){

  }

  getData(){
    this.dataService.fetchData()
      .subscribe(
        (data) => {
          this.items = data.customers;
          this.filteredItems = this.myCtrl.valueChanges
            .startWith(null)
            .map(i => i && i === 'object' ? i.name : i)
            .map(name => name ? this.filterItem(name) : this.items.slice());

        }
    );
  }

  filterItem(name) {
   return this.items.filter(item => new RegExp(`^${name}`, 'gi').test(item.name)); 
  }

Plunker demo

希望这会有所帮助！

【讨论】：

是的！这就是我需要的！谢谢！