为何修改user.checked属性后RxJS的users$流未发射变更事件？

问题根因 #

你修改的是users$发射的数组内的单个对象属性，并没有让users$这个BehaviorSubject主动发射新的数组值。RxJS流只有在源Observable发射新值的时候，才会重新执行下游pipe内的操作逻辑，所以checkedUsersId$不会触发重新计算。

方案1：修改属性后手动触发users$发射新值（最直接） #

因为你服务中的users$是BehaviorSubject类型，你可以在复选框状态变更时，拿到当前用户列表做不可变更新后重新next即可。
首先调整模板，把双向绑定改为事件触发更新：

<div *ngFor="let user of users$ | async">
  <mat-checkbox [ngModel]="user.checked" (ngModelChange)="onUserCheckedChange(user.id, $event)"></mat-checkbox>
</div>

组件内新增处理逻辑：

constructor(private securityService: SecurityService) {}

onUserCheckedChange(userId: number, isChecked: boolean): void {
  // 拿到用户列表当前快照
  const currentUsers = this.securityService.users$.value;
  // 做不可变更新，生成新数组和修改后的用户对象
  const updatedUsers = currentUsers.map(user => 
    user.id === userId ? {...user, checked: isChecked} : user
  );
  // 让users$发射新值，下游所有依赖流会自动重新计算
  this.securityService.users$.next(updatedUsers);
}

该方案下你原有定义的checkedUsersId$不需要做任何改动，就能正常收到更新并打印值。

方案2：新增变更触发流，组合计算勾选用户 #

如果users$是只读不可修改的，可以单独加一个触发流来通知变更：

// 组件内新增变更触发流
private userCheckChange$ = new Subject<void>();

// 组合users$和触发流，任意一个发射新值就重新计算勾选用户
this.checkedUsersId$ = combineLatest([
  this.users$,
  this.userCheckChange$.pipe(startWith(void 0))
]).pipe(
  map(([users]) => users.filter(user => user.checked).map(u => u.id))
);

// 复选框变更时调用next触发重新计算
onUserCheckedChange(): void {
  this.userCheckChange$.next();
}

注意事项 #

• 不建议直接修改数组内对象属性后next原数组引用，不可变更新可以避免很多脏数据、变更检测异常的问题。
• 如果securityService.users$设计为对外只读，建议在服务内部封装更新用户的方法，不要直接在组件里调用next，保证数据流的封装性。

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