Rxjs：如何根据列表的内部值过滤数据？答案

【问题标题】：Rxjs: How to filter data based on inner value of a list?Rxjs：如何根据列表的内部值过滤数据？
【发布时间】：2021-01-04 11:04:48
【问题描述】：

我使用以下方法检索数据：

this.employeeService
    .getList()
    .subscribe((list: any) => {
        this.list = list;
});

但是list中有2个属性，其中一个是data，另一个是count。所以，我需要根据list.data.isManager 属性应用过滤器而不破坏列表（我需要保留data 和count 属性）。所以，我需要这样的东西：

this.employeeService
    .getList()
    .subscribe((list: any) => {
        this.list = list.filter(x => x.data.isManager === true);
});

但由于列表不是数组，因此会引发错误。我需要根据list.data.isManager 应用过滤器。那么，我该如何解决这个问题呢？我应该使用map 运算符吗？

这是列表变量的示例数据：

列表：

count: 5
data: Array(5)
0: EmployeeListDto {isManager: true, id: 1, name: "John"}
1: EmployeeListDto {isManager: true, id: 2, name: "Mark"}
2: EmployeeListDto {isManager: true, id: 3, name: "Alice"}
3: EmployeeListDto {isManager: true, id: 4, name: "Mary"}
4: EmployeeListDto {isManager: true, id: 5, name: "Federic"}

【问题讨论】：

如果它不是一个数组，你也不能在它上面调用map()。请提供示例数据和预期输出。
如果 isManager 为真且 isanager 为假，this.list 的预期值是多少？
@pilchard 我为列表添加了示例数据。谢谢。
@GérômeGrignon 我只想检索isManager === true 的项目。但是在比较项目时，我想保留列表及其 count 和 data 属性和值。
可以说，一旦您过滤了data，count 将不再准确。

标签： javascript arrays reactjs angular rxjs

【解决方案1】：

isManager 不是数据的属性，而是 data 数组的一个项目的属性。

所以您需要将过滤器放在您的 data 属性上（并保留 count 属性）：

const filteredList = list.data.filter(item => item.isManager);
this.list = {
  count: filteredList.length,
  data: filteredList
}

【讨论】：

【解决方案2】：

列表中的数据是一个数组，所以你可以使用filter

 this.list = list.data.filter(x => x.isManager === true);

【讨论】：

【解决方案3】：

只是：

this.list ={ 
  data: list.data.filter(x => x.isManager),
  count: // ...
};

count的值可以是

list.count如果你想要原始计数
list.data.filter(x => x.isManager).length 如果您想要过滤后计数。在这种情况下，这样做更干净：

    this.list ={ 
          data: list.data.filter(x => x.isManager),
        };
    
     this.list['count'] = this.list.data.length;

**你不需要x.isManager === true，javascript内部管理。

【讨论】：

【解决方案4】：

如果你想以反应方式处理你的数据，你可以像处理你的过滤一样

this.employeeService
.getList()
.pipe(
  concatMap(arr => from(arr)),
  filter((ele: any) => ele.isManager)
 )
.subscribe((list: any) => {
    this.list = list;
});

【讨论】：