subscribing to a subject not working for first time oninit

Question

i have a service which get some data from server and the updates some subject and in my component's ngOnInit function i am subscribing to that subject. I have confirmed subject is being updated correctly.

following is my service's function which gets data from server and updated the subject.

getInboxData(id?) {
    this.inboxID = id;
    this.loadingData.next( // tells to start showing loading animation
    {
      showloading: true,
      clearDocuments: this.shouldClearDocuments()
    });

    this.getInboxCount();
    this.dashboardService.getInbox(id, this.page)
      .subscribe((response) => {
        for (const inbox of response['results']) {
          this.documents.push(inbox.document);
          // tells to stop showing loading animation
          this.loadingData.next({showloading: false, clearDocuments: this.shouldClearDocuments()});
        }
        if (response.next != null) {
          this.page++;
          // this.getInboxData(id);
        }else {
          this.page = 1; // reset
        }
        this.documentsData.next(response);

      });
  }

i am subscribing to documentsData in my component. following is component's code.

ngOnInit() {
    this.dashboardDataService.getInboxData(); 
    this.dashboardDataService.documentsData
      .subscribe((response) => {
        this.isLoadingMoreResult = false;
        this.loading = false;

        for (const entry of Object.values(response.results)){ // save new entries
          this.documents.push(entry);
        }

        this.documentsLoaded = Promise.resolve(true);
        this.filteredDocuments = this.documents; // both should be same when user gets new data
        console.log(this.filteredDocuments);
        $('#documentContentSearch').val(''); // reset text in searchBar

        // if (this.documents.length >= 8) { // if list is more than 8 then show scroll
        $('#tableContainer').css({'height': $('#mySideBar').innerHeight() - 195});
        const $myThis = this;

        $('#tableContainer').scroll(function(){
          if (!$myThis.isLoadingMoreResult) { // if it is not already loading result
            $myThis.loadMoreResults();
          }
        });

        $('#dropdown').scroll(function(){
          if (!$myThis.isLoadingMoreResult) { // if it is not already loading result
            $myThis.loadMoreResults();
          }
        });

        // load two results in first time
        if (this.dashboardDataService.page === 2) {
          this.loadMoreResults();
        }
    });
  }

but it is not getting response from suject when i navigate to this component from another component. But upon renavigating to same component from this component it is getting response correctly. can somebody help me understanding what is goin on here?

https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject — Vikas, May 08 '19 at 10:12
I am pretty sure @Ploppy answer would resolve your issue for a better picture you can refer the links, I have a quick question though Why on the earth you would use jquery with angular, it's an antipattern and Angular community discourages to use jquery with Angular — Vikas, May 08 '19 at 10:14

score 6 · Accepted Answer · answered May 08 '19 at 10:07

6

You subscribe to the subject after requesting the data.

You have to subscribe and then request the data.

ngOnInit() {
    this.dashboardDataService.documentsData.subscribe(...);
    this.dashboardDataService.getInboxData(); 
}

answered May 08 '19 at 10:07

Ploppy

14,810
6
41
58

subscribing to a subject not working for first time oninit

1 Answers1