angular - 无法使用 DocumentSnapshot 中的属性 data()

Question

我无法使用属性 data()在文档快照上。它在控制台中给了我一个错误。这是确切的错误:

auth.service.ts(72,20): error TS2339: Property 'data' does not exist on type 'Observable'.

我尝试以多种不同的方式获取数据。所有这些技术都是错误的。

服务:

constructor(
  private afAuth: AngularFireAuth,
  private afs: AngularFirestore,
  private router: Router,
  public db: AngularFirestore
) {
    this.user = afAuth.authState;

    this.user.subscribe((user) => {
      if (user) {
        this.userDetails = user;
        console.log(this.userDetails);
      } else {
        this.userDetails = null;
      }
    })
}

getUserName() {
  (this.isLoggedIn()){
    const userD = this.db.collection('users').doc(this.userDetails.uid);
    const doc = userD.get();
    return doc.data().firstName;
  } else {
    console.log('user not logged in');
    return "nothing";
  }
}

Answer 1

userD.get()返回一个可观察的 DocumentSnapshot ，所以你不能调用data()在那。所以你需要订阅。在这种情况下，您似乎想将数据返回到组件(？)，所以我建议您返回一个 observable:

import { take, map } from 'rxjs/operators';

// ...

getUserName() {
  if(this.isLoggedIn()){
    const userD = this.db.collection('users').doc(this.userDetails.uid);
    const doc = userD.get();
    return doc.pipe(
      // add take if you only want data one time, which closes subscription
      take(1),
      map(d => d.data().firstName)
    )
  } else {
    console.log('user not logged in');
    // need to return an observable
    return of("nothing");
  }
}

然后在您的组件中订阅 getUserName() , 通过手动调用 subscribe或使用 async模板中的管道。