如何对BehaviorSubject数据排序并使用RXJS重写过滤逻辑？

实现步骤 #

1. 先声明全量权限数据的存储Subject，用来保存你原来的clonned全量权限备份：

// 初始化时传入你的全量权限列表即可，若数据从接口获取可后续调用next赋值
public allUserRights$ = new BehaviorSubject<UserRight[]>([]);
// 你已创建的过滤状态主题，调整类型允许null值（代表无过滤）
public state$ = new Subject<UserRightState | null>();
// 最终用在模板的过滤后权限可观察对象
public userrights$: Observable<UserRight[]>;

2. 在组件初始化阶段组合数据流，实现自动过滤逻辑：

import { combineLatest, startWith, map, take } from 'rxjs';

ngOnInit() {
  // 组合全量权限流 + 过滤状态流
  this.userrights$ = combineLatest([
    this.allUserRights$,
    // 初始状态无过滤，默认展示全部权限
    this.state$.pipe(startWith(null))
  ]).pipe(
    map(([allRights, filterState]) => {
      // 无过滤条件直接返回全量数据
      if (!filterState) return allRights;
      // 匹配你原来的过滤规则
      const targetStateValue = getRightStateValue(filterState);
      return allRights.filter(st => st.value === targetStateValue);
    })
  );
}

3. 简化原来的点击过滤方法，只需要维护过滤状态即可：

filterState(state: UserRightState) {
  // 匹配原来的切换逻辑：重复点击同个过滤项则清空过滤
  this.state$.pipe(take(1)).subscribe(currentState => {
    this.state$.next(currentState === state ? null : state);
  });
}

额外说明 #

• 若你的全量权限数据来自接口，接口请求成功后调用this.allUserRights$.next(接口返回的权限数组)即可，后续过滤逻辑无需调整
• 模板中直接通过async管道订阅userrights$即可，比如 <div *ngFor="let right of userrights$ | async">
• 该写法下所有数据更新都是响应式的，无需手动赋值数组，只要全量权限或者过滤状态变化，视图会自动更新

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