RxJS 6 获取 Observable 数组的过滤列表答案

【问题标题】：RxJS 6 get a filtered list of array of ObservableRxJS 6 获取 Observable 数组的过滤列表
【发布时间】：2018-11-12 12:53:00
【问题描述】：

在我的 ThreadService 类中，我有一个函数 getThreads()，它返回一个带有我所有线程的 Observable<Thread[]>。

现在，我想要另一个版本的函数，其中我的线程按选定的主题过滤：函数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)
  );
}

提前感谢您的帮助。

【问题讨论】：

我认为线程是一个数组，你应该像 map(threads => threads.filter) 过滤器在这种情况下是标准 js
过滤器可以是starndar js（然后在地图中使用）或Rxjs learnrxjs.io/operators/filtering/filter.html。但是..thread.theme.id=== theme.id 中的 theme.id 是什么？

标签： javascript angular typescript rxjs observable

【解决方案1】：

我做了一个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)
      )
    )
  }

【讨论】：

旁注：这个答案依赖于javascript的原生数组过滤方法，而不是rxjs中的过滤。

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试使用以下代码。

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

【讨论】：

诀窍在于“filter(thread”处的线程是 Thread[ ] 而不是 Thread :| 看起来这行不通

【解决方案4】：

只需将map(threads => threads) 更改为mergeAll()

【讨论】：

【解决方案5】：

我想你在找grupobyoperator：

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

让我知道此代码如何为您工作。无论如何，if you need to play with it, a while ago a came with this example，我希望它可以帮助你澄清。

【讨论】：