Angular Firebase Realtime DB问题与承诺

如何解决Angular Firebase Realtime DB问题与承诺

我在使用angular + firebase实时数据库时遇到了麻烦

我在数据库服务中创建了一个函数，如下所示：

  getAllProject() {
    return firebase.database().ref('project').once('value').then((snapshot) => {
      if (snapshot.val()) {
        const dataObj = snapshot.val();
        return dataObj;
      }
    });
  };

这是不言自明的。

然后在我的轮播组件中：

import { Component,OnInit,ViewChild,ElementRef } from '@angular/core';
import { DbService } from '../services/db.service';

@Component({
  selector: 'app-carousel',templateUrl: './carousel.component.html',styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {
 

  arrayProject;
    

  constructor(private dbService: DbService) { 

    this.dbService.getAllProject().then((data)=>{
      this.arrayProject = data;
      console.log("this.arrayProject",this.arrayProject);
      //this one is processed in second,result : correct data
    });

   }

  ngOnInit() {

    console.log("this.arrayProject 2 : ",this.arrayProject);
    //this one is processed in first result : undefinned

  }

我知道在渲染数据之前必须解决一个诺言，但是在这种情况下，我在组件构造期间调用了我的服务，那么为什么在ngOnInit（）上未定义我的数据？

我需要在组件初始化之前准备好这些数据，因为这些数据将用于渲染：轮播中的img，文本等。

解决方法

因为getAllProject（）返回一个Promise，并且您在.then（）中提供的回调在ngOnInit之后被调用。将其移至ngOnInit

 async ngOnInit() {

    this.arrayProject = await this.dbService.getAllProject();
    console.log("this.arrayProject: ",this.arrayProject);
  }