How to read values of an array outside valueChanges after populating it inside a valueChanges subscription angularfire

Question

it's been three days and i'm still looking for a solution to this.

Basically i have a class attribute variable dataMapped which is going to be an array of course

i populate it inside getAllPersonnel() function

getAllPersonnel(){
    this.personnelService.getAllPersonnel().valueChanges().subscribe(
      data => {
        this.dataMapped = data ;
      })
  }

now i want to use the array variable this.dataMapped outside the getAllPersonnel() function.

i tried this :

ngOnInit() {
    this.getAllPersonnel();
    console.log(this.dataMapped); <== returns null
  }

but i get Undefined

the purpose of all of this is that i want to populate an angular material mat-table and i need to initialise the data source inside the constructor not inside the getAllPersonnel() function.

so instead of this :

getAllPersonnel(){
    this.personnelService.getAllPersonnel().valueChanges().subscribe(
      data => {
        data.forEach(personnel => {
          let personnelData :PersonnelData ; 
          personnelData = {
            image:personnel.image , 
            nom: personnel.nom,
            prenom: personnel.prenom,
            secteur: personnel.secteur,
            note: personnel.note,
            promotion: personnel.promotion
          }
          this.personnelDataArray.push(personnelData)
        })
        this.dataSource = new  MatTableDataSource<PersonnelData>(this.personnelDataArray);  <== i dont want the initialisation here
      }
    )
  }

i want the function to directly retrun an array filled with the subscription data so i can use it inside my constructor, something like this :

constructor(private personnelService : PersonnelService) { 
    this.getAllPersonnel();
    this.dataSource = new  MatTableDataSource<PersonnelData>(this.getAllPersonnel());
  } 

i'd be appreciative to any kind of help guys thank you .