Rxjs6 -过滤对象数组

Question

我将使用RXJS运算符filter过滤对象数组。

我有很多像这个一样的物体：

    {
      id: string,
      count: number
    }

我会得到那些count > 20的对象

我试过：

  getVotes2(): Observable<Vote> {
    return this._http.get<Vote>(url)
     .pipe(
       map( results => results ),
       filter( result => result.count>20 )
     );
  }

接下来，没有map和我总是能得到所有的记录。

有什么想法吗？

getVotes2(): Observable<Vote[]> {
 return this._http.get<Vote[]>(url)
  .pipe(
    map( results => results.filter( r => r.count < 20) )
  )
}

Answer 1

您对rx过滤器操作符的使用感到困惑。

filter rx运算符与数组filter运算符不一样。rx过滤器对流进行操作，并将满足条件的事物从流中排除，数组过滤器运算符对数组进行操作，并根据条件从数组中移除项。

您目前正在对数组本身的某个未定义的"count“属性过滤流，因此您在说”如果未定义> 20，那么不要让项目通过流“，而javascript (未定义)的一个怪癖是，尽管它是无效的比较，但它不大于20。

你需要做的是：

getVotes2(): Observable<Vote[]> {
 return this._http.get<Vote[]>(url)
  .pipe(
    map( results => results.filter(r => r.count > 20) )
  );
}

通过这种方式，可以使用rx对流中的项执行操作，并使用项上的数组筛选器对数组进行筛选。

编辑:正如所指出的，键入也需要正确，以便让类型记录知道您期待的是一个数组的投票对象，而不是一个单一的投票对象。

Answer 2

如果您得到的http响应类似于

{ 
  data: {
    results: [ {id: 'dd5144s', count: 14}, {id: 'dd51s4s', count: 22}, {id: 'dd5sa44s', count: 8}  ]
  }
}

然后试试这个：

 return this._http.get<Vote>(url)
   .pipe(
     switchMap( results => results ),
     filter( result => result.count>20 )
   );

希望这能有所帮助。