(Angular / Firestore) Grab / save collection to variable-CodePudding

I am trying to save collection from Firestore to an array. I can show it in html list but no idea how to save it to a variable. I know this is async It is working with *ngFor="let zasob of itemsZasoby" but still undefined in a variable. I need that for prepare json data to scheduler.

I was trying many examples from internet and no success. Maybe someone knows solution for async in angular to save the array? Switchmap or so? I am crying ritght now..

Service class:

import { Injectable, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { FsZasobyModel } from '../models/fs-zasoby.model';

@Injectable({
  providedIn: 'any'
}) 

export class FsZasobyService implements OnInit {
  private dbPath = '/zasoby';
  zasobyRef: AngularFirestoreCollection<FsZasobyModel>;
  
  constructor(private db: AngularFirestore) {
    this.zasobyRef = db.collection(this.dbPath);
  }
  ngOnInit(): void {
  }

  getAll(): AngularFirestoreCollection<FsZasobyModel> {
    return this.zasobyRef;
  }
}

Calendar class:

export class KalendarzComponent implements AfterViewInit, OnDestroy  {
  itemsZasoby: any;

  @ViewChild(BryntumSchedulerComponent, { static : true }) schedulerComponent: BryntumSchedulerComponent;

  constructor(
    private fsZasobyService: FsZasobyService) {}

  ngOnInit(): void {
    this.getItemsZasoby2();
  } 

  getItemsZasoby2(filterValue) { 
    this.fsZasobyService.getAll()
        .valueChanges().subscribe(data => {
        this.itemsZasoby= data       
          console.log(this.itemsZasoby);  -- There is data in an array
      })
      console.log(this.itemsZasoby); -- undefined cause of async
  }
}

CodePudding user response：

I'm not sure what you are trying to accomplish - could you elaborate on what you are trying to do? anyway, the reason it is undefined is like you said - it's async. this means that you are calling the second console.log - before the data has arrived. that is why it's undefined. whatever manipulation you want to do on the data needs to be done afterward. if you use switchmap/map/flatmap or whatever map inside the call itself - it's still an async function.

CodePudding user response：

I have a config for scheduler what needs a json data:

setKalendarzConfig() {
  this.kalendarzConfig = {
    resources  : this.itemsZasoby,
    events     : this.itemsZamowienia,
  
    barMargin  : 10,
    rowHeight  : 60,
    minHeight  : 150,
    eventStyle : 'border',
    mode :'vertical',
  }
}

In demo version it reads from json file with structure:

resources = [
  { id : '10001', name : 'kalKlasa 3GDA 07809', 'role': '[P]' },
  { id : '10005', name : 'G9 WOBET', 'role': '[PG]'},
]

So I am trying to get data from Firestore collection and save it to a variable this.itemsZasoby for replace date from file. Then I can go to work with firebase insteand of a local file.