在RxJs 6（Ionic / Angular）中使用映射和过滤器在对象数组中无法正常工作，过滤器被忽略

Question

有人知道为什么映射后此过滤器不起作用吗？

当我这样做时：

this.cacheService.getMainCache().pipe( map(val => val.list)).subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

我得到以下对象数组：

我需要过滤该数组并仅返回一个，其name属性等于某个字符串的那个数组，当我将filter运算符添加到管道中时，什么也没发生，我想没有任何内容被过滤：

this.cacheService.getMainCache().pipe(map(val => val.list), filter((item: any) => item.name == 'profile')).subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

我在这里做什么错了？

Answer 1

您的代码段问题是项目类型。您希望过滤器功能可以过滤项目。但是在您的情况下，item是整个数组本身。由于数组没有属性“名称”，因此订阅服务器上没有任何显示。 我建议使用正确的键入。

您有两个选择：

1. 使用标准的javascript过滤器：

this.cacheService.getMainCache().pipe(
    map(val => val.list.filter((item: any) => item.name == 'profile'))
).subscribe((val) => {
    console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

1. 将您的数组转换为单个值，并通过rxjs过滤器运算符进行过滤，然后将它们重新打包到数组中：

this.cacheService.getMainCache().pipe(
        map(val => val.list),
        concatAll(),
        filter((item: any) => item.name == 'profile')),
        toArray()
    ).subscribe((val) => {
        console.log(val);
    }, (error) => {
      console.log('Error: ', error);
    });

Answer 2

谢谢大家，但是我设法解决了这个问题，我的错误是：

this.cacheService.getMainCache()
  .pipe(switchMap((val) => from(val.list)))
  .pipe(filter((item: any) => item.name == 'profile'))
  .subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

Answer 3

尝试此@devnosaur，它可能会解决您的问题。有关可观察过滤器的更多信息，请查看here

 this.cacheService.getMainCache().map((value: any)=> value.filter(val=> val.name === 'profille')).subscribe((val) => {
      console.log(val);
    }, (error) => {
      console.log('Error: ', error);
    });

Answer 4

@devnosaur，您在链管上进行的最新更新，实际上不需要链管。您进行的最有效的更改是switchMap(val => from(val.list)，其作用与

相同

map(val => val.list), concatAll()

A。Winnen在上面推荐的。在我看来，即使这是多余的一行，但执行地图操作然后concatAll（）可以更好地进行通信，而在创建的可观察对象（来源）上使用展平运算符（switchMap）似乎很麻烦。