javascript - 如何在 ngOnInIt 函数中使用异步与 Angular8 firestore？

Question

我正在 ngOnInIt 函数中从 firestore 检索数据，并尝试在同一生命周期中使用该数据。如何使用Async来解决问题？

ngOnInit() {
    this.service.getUserData().subscribe(actionArray =>{
      this.userList = actionArray.map(item =>{
        console.log("Items", item);
        console.log("Data : ", item.payload.doc.data());
        return {
          id : item.payload.doc.id,
          ...item.payload.doc.data()
        } as customersUser;
      })
    });
    console.log("User List : ", this.userList);
    
    this.getUserData();

  }
  
  
  
  getUserData(){
  this.userList.map(item =>{
    if(item.id == this.userId){
      this.userObj = item;
    }
  })
  console.log(this.userObj);
}

我收到了一个空的 userList[] 数组，因为该函数不会等待接收快照更改。

Answer 1

移动此行

    console.log("User List : ", this.userList);

到 userList 填充数据的位置，即订阅者内部。所以，而不是

ngOnInit() {
    this.service.getUserData().subscribe(actionArray =>{
        this.userList = actionArray.map(aMappingFunction);
    });
    console.log("User List : ", this.userList);

    this.getUserData();
  }

做

ngOnInit() {
    this.service.getUserData().subscribe(actionArray =>{
        this.userList = actionArray.map(aMappingFunction);
        console.log("User List : ", this.userList);
    });

    this.getUserData();
  }