RxJS 6獲取Observable數組的篩選列表

Question

在我的ThreadService類中，我有一個函數getThreads() ，它返回一個帶有我所有線程的Observable<Thread[]> 。

現在，我希望我的函數的另一個版本，我的線程被選定的主題過濾：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)
  );
}

在此先感謝您的幫助。

Answer 1

我舉了一個StackBlitz / angular6-filter-results的例子

主要思想是在map()中過濾，因為過濾器將獲得一個對象數組。

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

Answer 2

請嘗試使用以下代碼。

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

Answer 3

你快到了。 使用這個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),

Answer 4

只需將map(threads => threads)更改為mergeAll()

Answer 5

我想你正在尋找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], [])
    )
  );
}

讓我知道這段代碼如何為您服務。 在任何情況下， 如果你需要玩它，不久前有一個這樣的例子 ，我希望它可以幫助你澄清。