CODEWITHSUNDEEP
angularhttpangular2-services
neehu
neehu

Reputation: 132

Subscribe in angular2

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);

         }
    }

Upvotes: 1

Views: 63

Answers (1)

AVJT82
AVJT82

Reputation: 73357

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! :)

Upvotes: 1

Related Questions