web-dev-qa-db-ja.com

RxJS 6は、Observableの配列のフィルターされたリストを取得します

私のThreadServiceクラスには、すべてのスレッドで_Observable<Thread[]>_を返す関数getThreads()があります。

ここで、選択したテーマによってフィルター処理されたスレッドを使用して、関数の別のバージョンを作成したいと思います：function getSelectedThemeThreads(theme: Theme)。

演算子mapとfilterを試してみましたが、次のエラーメッセージ_Property 'theme' does not exist on type 'Thread[]_が表示されます。

私が取り組んでいるコードの下：

_import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Thread } from '../models/thread.model';
import { Theme } from '../models/theme.model';

@Injectable({
  providedIn: 'root'
})
export class ThreadService {
  private threadsUrl = 'api/threads';

constructor(private http: HttpClient) { }

getThreads(): Observable<Thread[]> {
  return this.http.get<Thread[]>(this.threadsUrl);
}

getSelectedThemeThreads(): Observable<Thread[]> {
  return this.http.get<Thread[]>(this.threadsUrl).pipe(
    map(threads => threads),
    filter(thread => thread.theme.id === theme.id)
  );
}
_

よろしくお願いします。

javascriptangulartypescriptrxjsobservable
6
Johan Rin

私はこれの例を作った StackBlitz/angular6-filter-result

フィルターはオブジェクトの配列を取得するため、主なアイデアはmap()でフィルター処理することです。

getSelectedThemeThreads(theme: string): Observable<Flower[]> {
    return this.http.get<Flower[]>(this.threadsUrl).pipe(
      map(result =>
        result.filter(one => one.theme === theme)
      )
    )
  }
1
hamilton.lima

あなたはほとんどそこにいた。これを使用してもmap(threads => threads)は何もしませんが、おそらく代わりにこれを使用したいと思います。

mergeMap(threads => threads) // will turn Observable<Thread[]> into Observable<Thread>

concatMapまたはswitchMapも機能します。 mergeMap演算子は配列を反復処理し、各項目を個別に発行するため、すでに行っているようにfilter()を使用できます。

もちろん、これも使用できます。

map(threads => threads.find(thread => thread.theme.id === theme.id)),
filter(thread => thread !== undefined),
1
martin

map(threads => threads)をmergeAll()に変更するだけです

0
Fabricio

次のコードを使用してみてください。

getSelectedThemeThreads(theme): Observable<Thread[]> {
    return this.http.get<Thread[]>(this.threadsUrl)
    .map(res => res)
    .filter(thread => thread.theme.id == theme.id);
}
0
Abel Valdez

grupoby演算子 を探していると思います。

getSelectedThemeThreads(): Observable<Thread[]> {
  return this.http.get<Thread[]>(this.threadsUrl).pipe(
    groupby(thread => thread.id),
    mergeAll(group$ => group$.pipe(
      reduce((acc, cur) =>[...acc, cur], [])
    )
  );
}

このコードがどのように機能するか教えてください。いずれにせよ これをいじる必要がある場合は、少し前にこの例が付属しています e、それがあなたが明確にするのに役立つことを願っています。

0
Luillyfe