过滤Observable后如何重置初始数据以重新执行不同过滤规则？

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是：每次过滤操作都在修改后的this.projects数组上进行，而不是基于原始的全量数据。比如第一次过滤后，this.projects只剩下id>5的项目，再用它去筛选3-5之间的id，自然会得到空结果。

解决方案：缓存原始数据，基于原始数据进行过滤 #

我们可以在组件里缓存一份初始的全量项目数据，之后所有的过滤操作都基于这份原始数据来做，这样就不会出现数据被污染的问题了。

步骤1：添加变量存储原始数据

在组件类里声明一个变量，用来保存从接口获取的全量原始数据：

originalProjects: Project[] = []; // 假设你的项目类型是Project

步骤2：初始化时缓存原始数据

在组件的ngOnInit（或者其他初始化钩子）里，先获取一次全量数据，同时把它赋值给缓存变量和展示用的projects：

ngOnInit(): void {
  this.projectService.getProjects().subscribe(projects => {
    this.originalProjects = projects; // 把原始数据存起来，后续绝不修改它
    this.projects = [...projects]; // 初始展示全量数据，用浅拷贝避免引用问题
  });
}

步骤3：修改过滤方法，基于原始数据操作

现在把你的两个过滤方法改成基于originalProjects来过滤，而不是已经修改过的this.projects：

filterProjLessThenThree(){
  // 直接用原始数据过滤，不用再调用接口
  this.projects = this.originalProjects.filter(project => project.id > 5);
}

filterProjBeetwenThreeAndFive(){
  this.projects = this.originalProjects.filter(project => project.id >= 3 && project.id < 5);
}

如果后续你需要用RxJS的操作符（比如结合其他异步逻辑），也可以这样写：

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

filterProjLessThenThree(){
  of(this.originalProjects).pipe(
    map(projects => projects.filter(project => project.id > 5))
  ).subscribe(response => this.projects = response);
}

步骤4：添加重置方法（可选）

如果需要一个按钮来恢复到初始的全量数据，直接写一个简单的重置方法：

resetProjects(){
  this.projects = [...this.originalProjects]; // 浅拷贝一份，避免直接引用导致后续修改原始数据
}

这样操作下来，不管你进行多少次过滤，都是从原始的全量数据出发，再也不会出现过滤后数据为空的问题，而且随时可以重置回初始状态~

内容的提问来源于stack exchange，提问作者Alex Beria