代码之家 › 专栏 › 技术社区 › Johan Rin

rxjs 6得到一个可观测数组的过滤列表

observable rxjs typescript angular javascript

Johan Rin · 技术社区 · 6 年前

在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)
  );
}

提前谢谢你的帮助。

5 回复 | 直到 6 年前

Sunil Garg 6 年前

我举了个例子 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)
      )
    )
  }

Abel Valdez 6 年前

尝试使用以下代码。

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

martin 6 年前

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

Fabricio 6 年前

只是改变 map(threads => threads) 到 mergeAll()

Luillyfe 6 年前

我想你在找 grupoby operator :

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 exampl 我希望这能帮你澄清。

推荐文章

Fahad Subzwari · 我不能用rxjs过滤器过滤记录?

2 年前

Fazla Elahi Md Jubayer · 在rxjs中使用管道内的两个concatmap时,如何提取订阅块内的结果

2 年前

Irakli · 我想以角度显示id相似的数据

2 年前

Akash · 当BehaviorSubject发出两次真值时,使ngOnChange被激发

6 年前

Shamshiel · 将rxjs升级到6后,类型“Observable”上不存在属性“map”

6 年前

Corey Cole Roberto Tyley · 使用RxJS 6。x WebSocketSubject客户端

6 年前

gog · 如何观察rxjs中的属性更改?

6 年前

jesdynf · 在继续之前,如何使角度拦截器延迟?

6 年前

Sean Ivins · 角度2+HttpIntercept:在返回intercept函数之前,等待来自服务器的令牌

6 年前

Kevin Kalitowski · RxJs 6:从Observable获取ConnectableObservable

6 年前