アングル材質2オートコンプリート非同期

Question

私は角度4と角度のある材質2を持っています。私はオートコンプリートを使用したいと思います。最初のバージョンでは、オートコンプリートの角度のある素材が非対称の作業をサポートしていました。

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

すべてが素晴らしいと非常に快適でした。 2番目のバージョンでは、ガイドを検索しようとしましたが、何も見つかりませんでした。

Angular 2 materials, autocomplete with remote data

How to use correctly autocomplete component from Angular2 MaterialDesign?

それはカウントされません。彼らはonInitのサービスに目を向ける。最初のバージョンと同じように、クリックでそれが必要です。これを行う方法？

Answer 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

は、この情報がお役に立てば幸い！