使用 Observable 与另一个 Observable 一起工作

Question

我正在尝试显示信息，如下所示： 用户设置.component.html

<div *ngIf="(_user | async) as user">
  <div fxLayoutAlign="center center">
    <h3>{{ user.surname + ' ' + user.name }}</h3>
  </div>
  <div>
    <span>
      <b>Email : </b>
      {{ user.email }}
    </span>
  </div>
[...]

实际上，在 TS 中我会这样做：

_user = this.db.collection('user').doc("IDENTIFICATION").valueChanges({ idField: 'id' }) as Observable<User>;

问题是 IDENTIFICATION 是静态的，所以我尝试这样做：

user-settings.component.ts

_user: Observable<User> = this.getUser();
[...]
getUser() {
  var userTempo: Observable<User>;

  this.authService.getUser().subscribe(user => {
    userTempo = this.db.collection('user').doc(user.uid).valueChanges({ idField: 'id' }) as Observable<User>;
    console.log(user.uid);
  });
  return userTempo;
}

要知道this.authService.getUser() 来自：

authService.ts

constructor(private afAuth: AngularFireAuth) {}
[...]
getUser() {
  return this.afAuth.user;
}

在此配置中，_user 返回未定义，因此无法显示任何内容。 有人有想法吗？ 感谢您的宝贵时间

Answer 1

你必须返回一个 Observable，但你返回的是一个对象，因为你订阅了它并为 userTempo 分配了一个对象。

getUser(): Observable<User> {
  return this.authService.getUser().map(user => {
    console.log(user.uid);
    return this.db.collection('user').doc(user.uid).valueChanges({ idField: 'id' });
  });
}

如果this.db.collection('user').doc(user.uid).valueChanges({ idField: 'id' }) 返回一个 Observable，那么你将不得不这样做。

  getUser(): Observable<User> {
    return this.authService.getUser().switchMap(user => {
      return this.db.collection('user').doc(user.uid).valueChanges({ idField: 'id' });
    }).map(response => {
      return response;
    });
  }