如何在UserService中封装RxJS逻辑以获取实时更新的已勾选用户列表

1. 改造UserService（核心逻辑封装到服务内） #

首先在服务内基于已有的users$派生出已勾选用户的响应式流，同时封装勾选状态更新逻辑，保证状态统一管理：

import { map } from 'rxjs';

interface User {
    id: number,
    name: string,
    checked?: boolean;
}

class UserService {
   public users$ = new BehaviorSubject<User[]>([]);
   // 新增：派生已勾选用户流，自动响应users$的变化
   public checkedUsers$ = this.users$.pipe(
     map(users => users.filter(user => !!user.checked))
   );

   public load() {
       // 修正原有笔误：补全泛型、修正箭头函数语法
       this.http.get<User[]>('users').subscribe(users => this.users$.next(users));
   }
   
   public get users() {
       return this.users$.asObservable();
   }

   // 新增：封装用户勾选状态更新逻辑
   public updateUserCheckStatus(userId: number, checked: boolean): void {
     const currentUsers = this.users$.value;
     // 浅拷贝数组+对象，替换引用触发流更新
     const updatedUsers = currentUsers.map(user => 
       user.id === userId ? {...user, checked} : user
     );
     this.users$.next(updatedUsers);
   }

   // 可选：如果需要全选/取消全选功能，可新增对应方法
   public updateAllUserCheckStatus(checked: boolean): void {
     const updatedUsers = this.users$.value.map(user => ({...user, checked}));
     this.users$.next(updatedUsers);
   }
}

2. 组件代码调整 #

无需额外编写业务逻辑，直接引入服务暴露的checkedUsers$即可：

public users$: Observable<User[]>;
public checkedUsers$: Observable<User[]>;
constructor(private userService: UserService) {
    this.users$ = this.userService.users;
    this.checkedUsers$ = this.userService.checkedUsers$;
}

3. 模板代码调整 #

替换原有双向绑定为单向绑定+事件触发，走服务的状态更新逻辑，保证响应式流正常触发：

<div *ngFor="let user of users$ | async">
   <div>{{ user.name }}</div>
   <div>
     <mat-checkbox 
       [checked]="user.checked"
       (change)="userService.updateUserCheckStatus(user.id, $event.checked)"
     ></mat-checkbox>
   </div>
</div>
<!-- 直接通过async管道订阅已勾选用户流即可 -->
<div>Checked users: {{ checkedUsers$ | async | json }}</div>

方案说明 #

• 所有状态逻辑都封装在服务内，组件只负责视图渲染，符合单一职责原则
• checkedUsers$是纯派生流，不需要单独维护状态，只要users$发生变化会自动计算最新的已勾选用户
• 通过替换数组/对象引用的方式触发流更新，避免直接修改原对象导致流不生效的问题
• 如果需要保留[(ngModel)]的写法，需要在ngModelChange事件中手动调用服务的更新方法，不建议直接修改原对象属性，会导致状态不可控

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