如何下标过滤后的 observable

Question

我想下标具有过滤值的可观察对象，但过滤部分不起作用。

在我的服务中，我有

export class UserService {

  private userList: user[];
  public userList$ = new BehaviorSubject<user[]>([]);

  constructor() {
    this.userList = [
      {
        name : "ben",
        isActive : true,
      },
      {
        name : "chen",
        isActive : true,
      },
      {
        name : "Ray",
        isActive : true,
      },
      {
        name : "GuanJiaHong",
        isActive : true,
      },
      {
        name : "Maoge",
        isActive : true,
      },
    ]; 

    this.userList$.next(this.userList);
  }

  getActiveUsers(): Observable<user[]> {
    return this.userList$.asObservable().pipe(map(user => user.filter(x => x.isActive == true)));
  }

  setToInactive(user: user) {
    const currentUser = this.userList.find(x => x == user);
    if(currentUser != undefined) {
      currentUser.isActive = false;
    }
  }
}

在我的组件中，我有

export class ActiveUsersComponent implements OnInit {

  activeUser$: Observable<user[]> = new Observable();

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.activeUser$ = this.userService.getActiveUsers();
  }

  setInactive(user: user) {
    this.userService.setToInactive(user);
  }

}

在我的 activeUser 模板中，我有

Active User:<br>
<div *ngFor="let user of activeUser$ | async">
    {{user.name}} <button (click)="setInactive(user)">inactive</button><br>
</div>

当我将用户设置为非活动时，this.activeUser$ 应该只过滤活动用户，并且模板应该只显示活动用户，但它仍然显示所有用户，包括非活动用户，我想知道我的问题是什么可观察的实施？谢谢。

Answer 1

您忘记在 userList$ 流中发布 userList 的新状态。

换句话说，在您的setToInactive 方法中更改 currentUser 属性后：

this.userList$.next(this.userList);