Subscribe in angular2

Question

In my project i have a service call that i use in multiple components.Is there any way to have a separate method in the service to save the data and call that method to get the data.The first method below is the service call to get a reusable data and the second method is the one that i call to get that data.But it returns undefined each time i use it.Help please!!!

 GetUserRoles(): Observable<LoggedInUserDetails> {
    return this.http.get(BaseUrl + GetUserRole).map((res: Response) => {
      var data = res.json();
      this.loggedInUser = data;
      return this.loggedInUser;
    }) 
  }



 getUserDetails() {
    return this.loggedInUser;
  }

component using the above methods

export class IntiatedTravelSummaryComponent implements OnInit {
  public loggedInUser: LoggedInUserDetails;
  public id:number
  intiatedTravelRequestDetail: TravelReqForm;
  test:TravelReqForm[];
  test2:TravelReqForm[];
  constructor(private neuTravelService: NeuTravelService,private route:ActivatedRoute) {
   this.id =route.snapshot.params['TravellerId'];
   }

  ngOnInit() {
    this.loggedInUser =this.neuTravelService.getUserDetails();
      this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
  this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
   console.log(this.intiatedTravelRequestDetail);
       });
     }
}

Update* or if anyone can tell me how to pass data synchronously to the view. i.e this.intiatedTravelRequestDetail shows a value within the service call but shows undefined after the call. If anyone can tell me how to render the view after the data is loaded

  ngOnInit() {
        this.neuTravelService.GetUserRoles().subscribe(data => {
          this.loggedInUser = data;
          this.neuTravelService.GetIntiatedTravelDetails(this.loggedInUser).subscribe(data =>{ this.test = data;
      this.intiatedTravelRequestDetail= this.neuTravelService.getTravelSummaryDetails(this.id,this.test);
       console.log(this.intiatedTravelRequestDetail);
           });
        });
        console.log(this.intiatedTravelRequestDetail);

         }
    }

You need to subscribe to an observable in order to make the request. Right now you are not making any requests. — eko, Mar 28 '17 at 11:01
Can you add your code where you subscribe to this method and your usage on `loggedInUser` inside that? — eko, Mar 28 '17 at 11:22
Is `this.loggedInUser` is assigned to something in `ngOnInit` by the time you call it? — eko, Mar 28 '17 at 11:57
because it should be assigned value returned by the getUserRoles method which is called before — neehu, Mar 28 '17 at 12:02
Where do you provide `NeuTravelService` ? Are you sure this component is using the same instance with other components? — eko, Mar 28 '17 at 12:05
yes it does ....and where do you provide neutravel servicce in the sense — neehu, Mar 28 '17 at 12:07

score 1 · Accepted Answer · edited May 23 '17 at 11:46

As you noticed the intiatedTravelRequestDetail is undefined outside the callback, here is an excellent answer for you, written by our good sir Mr. @echonax :) : How do I return the response from an Observable/http/async call in angular2?

This asynchronous event also causes that the view is rendered before data has been retrieved. Since you are not providing a sample of your template, I'm guessing that this.intiatedTravelRequestDetail is an object and you want to display properties from this.

You could use the safe navigation operator, i.e ?

{{intiatedTravelRequestDetail?.myProperty}}

This safeguards null values.

Also you could wrap it it inside a *ngIf

<div *ngIf="intiatedTravelRequestDetail">
  {{intiatedTravelRequestDetail.myProperty}}
</div>

which won't render that part of the view unless there is values in intiatedTravelRequestDetail.

Hope this helps! :)

Subscribe in angular2

1 Answers1