运算符过滤器不按从 API 发送的元素进行迭代

Question

我正在尝试使用 Angular 7 的运算符过滤器。我有一个用 Express 制作的 api。举个例子很简单。这个APIreturn一个Object数组。像这样：

[
  {name: 'Admin'}, 
  {name: 'Invitado'}, 
  {name: 'Ejecutivo'}
]

接下来是API代码：

function listRole(req, res) {
    var params = req.params;

    var page = 1;
    var cant = 10;

    if ( params.page ){
        page = parseInt(params.page);
    }

    if ( params.cant ){
        cant = parseInt(params.cant);
    }
    RoleModel.find().paginate(page, cant, (err, roles, total) => {
        if ( err ) {
            return res.status(500).send({
                message: err
            });
        }
        return res.status(200).send(
            roles
        );
    })

}

在 Angular 7 的应用程序中，我有一项服务 return 与参数匹配的角色列表。

我的服务：

  getRoles(role: string): Observable<any> {
    return this.http.get<any[]>(this.url).pipe(
      filter( (e: any) => {
        console.log(e) // this return an array
        return e.name === role;
      })
    );
  }

我订阅这个服务时，数据为空：

    this.userService.getRoles('Admin').subscribe( data => {
      console.log(data);
    });

我的问题是： 为什么运算符过滤器 return 中的值 e 是一个数组？ 我想我应该遍历一个数组

感谢任何帮助

Answer 1

找了几个博客找到了解决办法。

FlatMap 运算符将 Observable 发出的项目转换为 Observable，然后将这些发出的项目扁平化为单个 Observable

因此，第一件事是应用此运算符，以便将响应转换为发出元素并可以遍历每个元素的 Observable。解决方案是这样的：

  getRoles(role: string): Observable<any> {
    return this.http.get<any[]>(this.url).pipe(
      flatMap( (data) => data ),
      filter( (e: any) => {
        return e.name === role;
      })
    );
  }

这个解决方案是正确的，但有一个细节。我无法通过元素数组进行迭代，因为 flatMap return 是一个 Observable。也就是说，当我订阅此服务时，我不会通过数组进行迭代，在模板中我无法使用 *ngFor。

这个细节我解决了：

  getRoles(role: string): Observable<any> {
    return this.http.get<any[]>(this.url).pipe(
      flatMap( (data) => data ),
      filter( (e: any) => {
        return e.name === role;
      }),
      toArray()
    );
  }

运算符过滤器不按从 API 发送的元素进行迭代

Operator Filter not iterate by element sent from API

operators

angular

angular7