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-result

的例子

主要思想是在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

你快到了。使用此<script> var files = <%- JSON.stringify(files) %>; </script>除了你可能想要使用它之外什么都不做：

map(threads => threads)

mergeMap(threads => threads) // will turn Observable<Thread[]> into Observable<Thread>或concatMap也可以。 switchMap运算符将迭代数组并分别发出每个项目，然后您就可以使用mergeMap。

你当然可以使用这个：

filter()

Answer 4

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

即可

Answer 5

我认为您正在寻找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 e，我希望它可以帮助你澄清。

RxJS 6获取Observable数组的筛选列表

5 个答案: