以反应方式更改 Angular 组件中的单个对象的最佳做法是什么

Question

假设我有一个获取用户的 http 请求：

users$: Observable<User[]>;

ngOnInit() {
  users$ = this.users_service.get_all_users();
}

我在我的模板中使用异步管道订阅了这个可观察对象：

<div *ngFor="let user of users$ | async">

我想用另一个 http 请求更改单个用户的电子邮件，但保留单个订阅。问题是在我创建 users$ observable 时尚未定义更改电子邮件的 http 请求。我所做的是：

users$: Observable<User[]>;
update_user_event$ = new BehaviorSubject(null);
users_with_updates$: Observable<User[]>;

ngOnInit() {
  users$ = this.users_service.get_all_users();

  users_with_updates$ = Observable.combineLatest(users$, update_user_event$)
  .switchMap(([users, update_user_event]) => {
    return Observable.of(users)
  })
}
update_user(user) {
  this.user_service.update_user(user)
  .toPromise() // <== I don't want to subscribe to this request. Is there a way to combine it with `users$` without subscribing?
  .then(updated_user => {
    for(let key of user) {
      user[key] = updated_user[key]
    }
    update_user_event$.next(null);
  })
}

如您所见，我使用 toPromise() 订阅了 update_user。我不能提前合并这个请求，因为它在被请求之前没有定义。我一直在 Internet 上搜索，但找不到公认的最佳做法。
你认为应该怎么做？谢谢

Answer 1

我建议将用户存储在一个主题中。初始调用以及任何更新都将在 BehaviorSubject 上调用 next。

private users: BehaviorSubject<User[]> = new BehaviorSubject<User[]>([]);
users$: Observable<User[]> = this.users.asObservable();

ngOnInit() {
  this.users_service.get_all_users().subscribe(this.users);
}

update_user(user) {
  this.user_service.update_user(user)
  .toPromise()
  .then(user => {
    const currentUsers = this.users.value;
    // TODO: change user in currentUsers
    this.users.next(currentUsers);
  })
}

以反应方式更改 Angular 组件中的单个对象的最佳做法是什么

What is the best practice to change a single object in Angular component in a reactive way

rxjs

angular

async-pipe