使用 RXJS 过滤数组答案

【问题标题】：Filtering array with RXJS使用 RXJS 过滤数组
【发布时间】：2019-06-12 15:01:47
【问题描述】：

我正在尝试使用 RXJS6 在 Angular 7 中过滤 HTTP 请求的返回。

我必须过滤响应；只获取 IdSkill 等于 1234 的用户。

但是，我无法做到这一点。我刚刚收到此错误：

类型“Observable”不可分配给类型“Observable>”。 “用户[]”类型缺少“分页”类型的以下属性：总计、项目

RXJS 不是我的强项；我只是使用基础知识，只做简单的 get/post HTTP 请求。

我的代码：

/* Interface */
export interface Pagination<t> {
    total: number;
    items: t[];
}

export interface User {
    idUser: number;
    name: string;
    active: boolean;
    skill: Skill;
}

export interface Skill {
    idSkill: number;
    name: string;
}

/* Service */
getUsers(): Observable<Pagination<User>> {
    return this._httpClient.get<Pagination<User>>(
      'http://localhost/api/users',
      { headers: this._auth }
    ).pipe(
      filter(x => x.items.filter(user => user.skill.idSkill == 1234))
    );
}

谢谢

【问题讨论】：

标签： javascript angular rxjs observable rxjs6

【解决方案1】：

您需要的运算符是map，因为您想重新映射（过滤）您的内部结果。当您想要过滤从 Observable 发出的结果本身时，使用 RxJs filter。

import { map } from 'rxjs/operators';


/* Service */
getUsers(): Observable<Pagination<User>> {
    return this._httpClient.get<Pagination<User>>(
      'http://localhost/api/users',
      { headers: this._auth }
    ).pipe(
      map((pagination: Pagination<User>) => ({
         ...pagination,
         items: pagination.items.filter(user => user.skill.idSkill == 1234)
      }))
    );
}

【讨论】：

嗯...虽然这是正确的并且需要正确的功能，但这可能不是全部情况，因为x.items.filter 返回一个真实值并允许代码工作。类型错误似乎在别处
这看起来像 JavaScript 的 filter 而不是 RxJS 的。但是Map 在这里看起来很有帮助。

【解决方案2】：

您的端点返回返回的内容，因此只需使用find 即可从中获取单个匹配项。或filter 为您提供匹配数组。

getUsers(): Observable<Pagination<User>> {
    return this._httpClient.get<Pagination<User>>(url,{ headers: this._auth })
       .pipe(take(1))
       .subscribe(users => {

            // finds a single result
            theObject = users.find(obj => obj.IdSkill == 5);

            // return an array of all matching results
            arrayOfResults = data.filter(obj => obj.IdSkill === 'JavaSc');

       });
}

【讨论】：