Question

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

我必须过滤响应；仅获得IDSkill等于1234的用户。

但是，我无法实现这一目标。我刚收到此错误：

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

RXJS不是我的强项。我仅使用基础知识，仅执行简单的获取/发布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))
    );
}

谢谢

Answer 1

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

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

Answer 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');

       });
}

使用RXJS过滤数组

2 个答案: