0

I have written the service code like this to read from backend 

getData(): any { 

    let headers = new Headers(
      {

      });
    let options = new RequestOptions({ headers: headers });

    return this.httpClient.get('https://link', options)
      .map((res: Response) => res.json())
      // .do(data => console.log('All data: ' + JSON.stringify(data)))
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));

and the code to load data

ngOnInit() {
    this.service.getData().subscribe(
      (res) => {this.Data = res},
      (error) => this.errorMessage = <any>error);
}

but here it's getting data after the view loads so it's giving error.

How to load the data before view loads??

Kokulan
  • 1,316
  • 3
  • 19
  • 35
  • Try the `async` pipe in your view. – AT82 Jan 04 '17 at 18:37
  • i didn't get you? – Kokulan Jan 04 '17 at 18:38
  • if you are displaying something in your view... like `*ngFor="let d of Data"` add the async pipe like so `*ngFor="let d of Data | async"` IF that is your problem (error) – AT82 Jan 04 '17 at 18:39
  • See also http://stackoverflow.com/questions/37611549/how-to-pass-parameters-rendered-from-backend-to-angular2-bootstrap-method/37611614#37611614 – Günter Zöchbauer Jan 04 '17 at 19:02
  • Warining: lots of docs to read! You may need [resolve guard](https://angular.io/docs/ts/latest/guide/router.html#!#resolve-guard). If you do, and when you see no result, you may add `first` operator, like [so](http://stackoverflow.com/questions/39066604/angular-2-router-resolve-with-observable). – Timathon Jan 05 '17 at 06:03

2 Answers2

1

Best option is to use a Routeresolver. Resolvers are part of the route definition and intended to provide data before a route is activated. So if the view is shown you can get the provided data in the ngOnInit. You just have to use your code to fetch data in the resolver

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DataService } from './DataService';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class MyDataResolve implements Resolve<any> {

    constructor(private dataService: DataService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>|Promise<any>|any     {

        let id = +route.params['id'];
        return this.dataService.getRecords('MT_Entity', id);    
    }
}

In the Component: export class BesuchdetailComponent {

   ngOnInit(): void {
     // Initialize form values, Prepare for SELECTS, ...
     let rawdata: any;
     this.rawbobject = this.route.snapshot.data['myobject'];
   }
 }

Add Routerdefinition:

export const AppRoutes: Routes = [
{

    {
       path: 'objectdetail/:id',
       component: YourComponent,
       resolve: {
          myobject: BesuchResolve
       }
    },
  }
Karl
  • 3,099
  • 3
  • 22
  • 24
-3

Angular 2 is an OOP like Java and C++ using classes. I advice you to start using classes at your service file. The link below is a solution that you may be looking for. Hope this helps. Happy coding..

   Angular 2 , MEAN Stack : Receiving JSON instead of HTML
harold_mean2
  • 238
  • 1
  • 14