Как использовать Async с Angular8 firestore в функции ngOnInIt?

Question

Я извлекаю данные из магазина в функции ngOnInIt и пытаюсь использовать эти данные в том же жизненном цикле. Как использовать 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();
  }

Answer 2

Используйте async await . Это другое решение. попробуй.

async ngOnInit() {
    await 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);

    await this.getUserData();

  }



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