observableを使ってobservableをフィルタリングする方法

Question

observableからダッシュボードのリストを表示するためのコンポーネントがあります。ユーザーはこのリストで検索する機能を必要としますが、小さいサイズのためにこのクライアント側を好むことになります。

この作業を取得するために私は次のコードを使用した結果が観察セットアップするコンポーネント

@Input() dashboards: Observable<Dashboard[]>; // dashboards 

term = new Subject<string>(); // search term 
results: Observable<Dashboard[]>; // actual dashboard to display 

に3つの観測を追加しました。私は、負荷何で

<input 
    [disabled]="(dashboards | async)?.length < 1" 
    (keyup)="term.next($event.target.value)" 
    type="search" 
> 
<ul> 
    <li *ngFor="let dashboard of (results | async)"> 
     {{dashboard.name}} 
    </li> 
</ul> 

次したテンプレートで

ngOnInit(): void { 
    this.results = this 
     .term 
     .distinctUntilChanged() 
     .share() 
     .switchMap(term => { 
      return this.getDashboards(term); 
     }) 
     .share(); 
} 

private getDashboards(term) { 
    return this.dashboards 
     .map((dashboards: Dashboard[]) => { 
      return dashboards.filter(
       this.getFilter(term) 
      ); 
     }); 
} 

private getFilter(term) { 
    term = term.toLowerCase(); 
    return (dashboard: Dashboard) => { 
     // filter logic 
    }; 
} 

を示しているが、リストを入力するときに表示され、実際にフィルタリングされます。

私の質問は、これが行く方法か、この方法ですか、それが正しい方法であれば、どのようにしてデータがロードされていることを確認できますか？

Answer 1

他の観察可能な事の後、私は観察可能なもののいくつかの新しいことを学びました。

最初に、用語をBehaviorSubjectに変更し、デフォルトの空の文字列を使用しました。これは、常にイベントが発行され、使用可能であることを意味します。

term = new BehaviorSubject<string>(''); // search term 

次に、combineLatestを使用しました。それを使って、第2の観測可能なものを使うことができます。 resultsを取得するコードは、その後に続きます。

this.results = this 
     .dashboards 
     .combineLatest(
      this.term 
     ) 
     .map((data) => { 
      return data[0].filter(this.getFilter(
       data[1] 
      )); 
     }) 
     .share(); 

getDashboards方法は、データがコンソールにデータを印刷する必要があります示していることを確認するには