Angular2のリストにバインドする複数のサービスコールを処理する

Question

アプリケーションには、ロールとそのユーザーをページ内のULリストとして表示するページがあります。 ユーザーリストには、いずれかの役割を選択すると入力されます。問題がフェッチユーザーとしてまだ進行中である間、UIにおける役割の選択が無効になっていないとして上記の機能のための役割入力が動的に変化することである

public getUsers(roles: Any): Users { return service.getUsers(roles).subscribe((users) => this.userList = users;);) 

- ユーザーの取り込みを以下のサービスコールを使用して行われますユーザリストに間違った結果が表示されます。

例： Role1とRole2が選択され、サーバー呼び出しが行われてユーザーが取得されます。サーバーコールはまだ進行中ですが、私は現在Role1の選択を解除していますが、これでユーザーリストに数秒間Role1とRole2がまだ入力されていることがわかり、その後Role2のユーザーがリストを更新します。

これは、要求が非同期であり、ユーザーリストが最初にRole1ユーザーとRole2ユーザーにバインドされ、後で再びRole2ユーザーにバインドされるためです。 2番目のリクエストやその他のより良いアプローチを開始している間に、継続中のリクエストがユーザーに入力されるのを止める方法はありますか？

ありがとうございました。

Answer 1

Observableを利用することができます。

データを取得するためにサーバーへの呼び出しを実行すると、サブスクリプションとして変数に格納できます。そして、それからunsubscribeあなたがもう一度試してください。

subscription: any; 

getUsers(roles: Any): Users { 
    if(this.subscription['getUsers']) { 
     this.subscription['getUsers'].unsubscribe(); 
    } 

    this.subscription['getUsers'] = service.getUsers(roles).subscribe(
     (users) => this.userList = users; 
    ); 
} 

Answer 2

我々はObservableを使用して要求をキャンセルすることができます。同様のスニペットが以下のようになります。 Plunkr link

private request:any; 
    search() { 
     if (this.request) { 
     this.request.unsubscribe(); 
     } 
    this.request = this.searchService.search(this.searchField.value) 
     .subscribe(
      result => { this.result = result.artists.items; }, 
      err => { this.errorMessage = err.message; }, 
      () => { console.log('Completed'); } 
    ); 

    }