ユーザー入力時に関数を呼び出す

Question

私は意図的にng2-autocompleteを使って自動補完ドロップダウンを実装しようとしています。しかし、私のデータソースは遠隔地にあり、私はAngular 2サービスアプリケーションのサーバーを使ってデータソースに問い合わせます。

コンポーネントビューここ

<ng2-completer 
     [(ngModel)]="searchStr" 
     [datasource]="dataService" 
     [minSearchLength]="0" 
     (change)='findAddress($event)'> 
</ng2-completer> 

コンポーネント

findAddress($event){ 
     this.addressCrawlerService.findMap($event.target.value) 
      .subscribe(
       res => { 
        let resultArray = res["result"]; 
        this.searchData = resultArray; 
        this.dataService = this.completerService.local(this.searchData, 'streetAddress', 'streetAddress'); 
       }, 
       error => { 
        console.log(error.json); 
       } 
     ); 
} 

値が変更されたときの値が発射されていません。このエラーを修正するために私のコードで何が間違っています。

Answer 1

私はあなたが入力をやめるまでサービスコールを遅らせる必要があると思います。そのために

次の2つのオプションがあります。

1. をここで説明するように角度の方法を使用しhttps://angular.io/guide/http#1-wait-for-the-user-to-stop-typing

2. このplunkerの例を参照してください... 'javascriptの' 方法を使用します。

   https://embed.plnkr.co/9VYmoGxKO3buc4DmVQgl/

princどちらの方法も同じです。タイプされた各文字について、両方とも、すなわち400msを待つためのタイマーを設定する。ユーザーが400ms以内に次の文字を入力すると、既に設定されているタイマーが停止し、新しいタイマーが開始されます。入力せずに400msが経過すると、コードが実行されます。