Angular 显示属于当前登录用户的所有文档

所有文档都有一个字段，其中包含创建文档的用户的userId

我试图进行一个查询，显示包含当前登录用户userId的所有文档。但我的问题是用户ID没有定义

组成部分：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './../core/auth.service';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';

export interface Restaurants { address: string; img: string; name: string; owernId: string; tag: string[]; }
export interface RestaurantsId extends Restaurants { id: string; }

interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favoriteColor?: string;
}

@Component({
  selector: 'app-personal-notes',
  templateUrl: './personal-notes.component.html',
  styleUrls: ['./personal-notes.component.css']
})

export class PersonalNotesComponent implements OnInit {
  userId;
  private restaurantsCollection: AngularFirestoreCollection<Restaurants>;
  restaurants: Observable<RestaurantsId[]>;

  constructor(public auth: AuthService, private afs: AngularFirestore, private afAuth: AngularFireAuth) {

    // Get currentUser Id
    this.afAuth.authState.subscribe(user => {
      if (user) { this.userId = user.uid; }
      console.log(this.userId);
    });

    // Query all restauratns beloning to currentUser Id
    this.restaurantsCollection = afs.collection<Restaurants>('restaurants'
      , ref => ref
        .where('ownerID', '==', this.userId));

    this.restaurants = this.restaurantsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Restaurants;
        const id = a.payload.doc.id;
        return { id, ...data };
      });
    });
  }

  ngOnInit() {

  }

}

从'@angular/core'导入{Component，OnInit}；
从“/../core/auth.service”导入{AuthService}；
从“angularfire2/firestore”导入{AngularFirestore、AngularFirestoreDocument、AngularFirestoreCollection}；
从“rxjs/Observable”导入{Observable}；
从'angularfire2/auth'导入{AngularFireAuth}；
导出接口{地址：string；img:string；名称：string；owernId:string；标记：string[]；}
导出接口RestaurantsId扩展了餐厅{id:string；}
界面用户{
uid：字符串；
电子邮件：字符串；
photoURL？：字符串；
displayName？：字符串；
favoriteColor？：字符串；
}
@组成部分({
选择器：“应用程序个人笔记”，
templateUrl:'./personal notes.component.html'，
样式URL:['./personal notes.component.css']
})
导出类PersonalNotesComponent实现OnInit{
用户标识；
私人餐厅收藏：AngularFirestoreCollection；
餐厅：可见；
构造函数（公共身份验证：AuthService，私有afs:AngularFirestore，私有afAuth:AngularFireAuth）{
//获取当前用户Id
this.afAuth.authState.subscribe（用户=>{
如果（用户）{this.userId=user.uid；}
console.log（this.userId）；
});
//查询属于currentUser Id的所有餐馆
this.restaurantcollection=afs.collection（'restaurants'
，ref=>ref
.where（'ownerID'，'='，this.userId））；
this.restaurants=this.restaurantCollection.snapshotChanges（）.map（操作=>{
返回actions.map（a=>{
const data=a.payload.doc.data（）作为参数；
const id=a.payload.doc.id；
返回{id，…data}；
});
});
}
恩戈尼尼特（）{
}
}

当我在authState函数中使用console.log时，我可以看到userId，但在authState函数之外它是未定义的

---

我遗漏了什么？

您遗漏了执行顺序。
当用户ID仍然未定义时，您的查询将被发送到服务器。
如果您可以将查询嵌套在authStateChange处理程序中，那么它应该可以正常工作

this.afAuth.authState.subscribe(user => {
  if (user) { this.userId = user.uid;
  console.log(this.userId);


// Query all restauratns beloning to currentUser Id
this.restaurantsCollection = afs.collection<Restaurants>('restaurants'
  , ref => ref
    .where('ownerID', '==', this.userId));

this.restaurants = this.restaurantsCollection.snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data() as Restaurants;
    const id = a.payload.doc.id;
    return { id, ...data };
  });
});
}
}); 

this.afAuth.authState.subscribe（用户=>{
如果（user）{this.userId=user.uid；
console.log（this.userId）；
//查询属于currentUser Id的所有餐馆
this.restaurantcollection=afs.collection（'restaurants'
，ref=>ref
.where（'ownerID'，'='，this.userId））；
this.restaurants=this.restaurantCollection.snapshotChanges（）.map（操作=>{
返回actions.map（a=>{
const data=a.payload.doc.data（）作为参数；
const id=a.payload.doc.id；
返回{id，…data}；
});
});
}
}); 

您缺少执行顺序。
当用户ID仍然未定义时，您的查询将被发送到服务器。
如果您可以将查询嵌套在authStateChange处理程序中，那么它应该可以正常工作

this.afAuth.authState.subscribe(user => {
  if (user) { this.userId = user.uid;
  console.log(this.userId);


// Query all restauratns beloning to currentUser Id
this.restaurantsCollection = afs.collection<Restaurants>('restaurants'
  , ref => ref
    .where('ownerID', '==', this.userId));

this.restaurants = this.restaurantsCollection.snapshotChanges().map(actions => {
  return actions.map(a => {
    const data = a.payload.doc.data() as Restaurants;
    const id = a.payload.doc.id;
    return { id, ...data };
  });
});
}
}); 

this.afAuth.authState.subscribe（用户=>{
如果（user）{this.userId=user.uid；
console.log（this.userId）；
//查询属于currentUser Id的所有餐馆
this.restaurantcollection=afs.collection（'restaurants'
，ref=>ref
.where（'ownerID'，'='，this.userId））；
this.restaurants=this.restaurantCollection.snapshotChanges（）.map（操作=>{
返回actions.map（a=>{
const data=a.payload.doc.data（）作为参数；
const id=a.payload.doc.id；
返回{id，…data}；
});
});
}
});