My Angular subscribe function is running before the data has loaded. Is there any way to fix this?

Question

I am having a problem with subscribe running before it gets it's data. I have 3 components that need to have 3 pieces of data to load. So rather than call the backend 3 times, I put them all into one array loaded from the backend, and then divide between the 3 components on load. Some of the components need the same data.

So I have a service which gets the code from the backend. When my function gets the data back I load a setter function with the data called setFolderStore, and I have a getFolderStore function call. The problem is that my component seems to be running the getFolderStore, before I have set the data. I do this so that my other components can get the data, without having to re-run the call to the backend.

//Service
private folderStore = new BehaviorSubject<adminInterfaces.IfolderList[]>([]);

buildGallery(postData: any): Observable<any> {
   return this.httpClient.post(this.apiUrl +'commander/readImagesFolders', postData).pipe(
      map((postData:any)=>{
         this.setFolderStore(postData.folderList);// this sets one part of my data.
         return postData;
      })
   );
}
public setFolderStore(store:any) {
    this.folderStore.next(store);
}
public getFolderStore(): Observable<Array<adminInterfaces.IfolderList>>{
    return this.folderStore.asObservable();
}

In my first component I run buildGallery.

// First component  
this.adminService.buildGallery(this.postData).subscribe(res => {
         this.image = <gallery.IgalleryData>res.organise;
      error => {
      });
}

In my second component I have a console log. It runs once empty, and then runs again with the full data, but by that time I have already got an error, because I am setting an index from the data, which obviously fails. Surely it should wait for this.folderStore.next(store) to be run?

ngOnInit(): void {
   this.getFolderStoreSubscribe = this.adminService.getFolderStore().subscribe((data) => {
      let index = 0;
      if(typeof data !== null){
         console.log(data);
         if (this._route.snapshot.queryParamMap.has('f')) {
            this.currentFolderID = this._route.snapshot.queryParamMap.get('f');
            index = data.findIndex(x => x.folder_id == this.currentFolderID);
            this.folderName = data[index].name;// Here this is generating an error because the subscribe is running before I get the data.
         }
      }
   });
}

So why is my subscribe running before it gets it's data, and is there a solution to the problem? Really the subscribe shouldn't run until after I have called setFolderStore.

Answer 1

Please change behavior subject to subject so that you will not get any initial value.

private folderStore = new Subject<adminInterfaces.IfolderList[]>();