Блог

У меня возникли некоторые проблемы с angular firebase Realtime DB

Я создал функцию в своей службе базы данных, подобную этой :

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

что не требует пояснений.

Затем в моем компоненте carousel :

 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, text, ect, в моей карусели.

Потому что getAllProject() возвращает обещание, а обратный вызов, который вы указали в .then(), вызывается после ngOnInit. переместите его в ngOnInit

  async ngOnInit() {

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