Get data on the Component load

问题

I have a component which needs to show the data in the grid on the component/page Load and when a button is clicked from parent component it needs refresh the grid with new data. My component is like below

export class TjlShipdateFilterComponent implements DoCheck {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

 ngDoCheck() {
 // this data is from the service, trying to get it on Page load
  }

@Input() filter: ShipDateFilterModel[];
//Load or refresh the data from parent when the button clicked from parent component 
ngOnChanges(changes: SimpleChanges) {
}

The ngOnChanges works fine, it gets the data from the parent component and displays when the button is clicked from the parent component. But on load of the page/component the grid it doesn't show anything and says this.psService.tDate; is undefined.

Below is the service where I get the tDate

export class ProjectShipmentService {
   ......    
  constructor(service: DataService, private activatedRoute: ActivatedRoute) {
      service.get<ShipDateFilterModel[]>(this.entityUrl).subscribe(x => this.tDate = x);
   }

I am unsure what am I missing here. How can I achieve this scenario

回答1:

It happened because when the component is loaded, the request in your service may not completed and the data may not return yet, that why tDate is undefined, try subscribe to it inside your component, also use ngOnInit() instead of ngDoCheck().

In your service:

tDate: Observable<ShipDateFilterModel[]>

constructor(service: DataService, private activatedRoute: ActivatedRoute) {
    ...
    this.tDate = service.get<ShipDateFilterModel[]>(this.entityUrl)
}

In your component:

export class TjlShipdateFilterComponent implements OnInit, OnChanges {

  tljShipDate: ShipDateFilterModel[];

  constructor(private psService: ProjectShipmentService) {
  }

  ngOnInit() {
  // this data is from the service, trying to get it on Page load
    this.psService.tDate.subsribe(x => this.tljShipDate = x);
  }

  @Input() filter: ShipDateFilterModel[];
  //Load or refresh the data from parent when the button clicked from parent component 
  ngOnChanges(changes: SimpleChanges) {
  if (changes.filter && changes.filter.currentValue)
   {     
     this.tljShipDate = this.filter;
  }
 }
}

回答2:

You have a couple options here. NgOnInit will run when the component is created, before it is rendered. This is the most common way to load data on component initialization. If you need the data even before the component is initialized, then you may need to utilize a Resolver. Here's an example:

import { Injectable } from '@angular/core'
import { HttpService } from 'services/http.service'
import { Resolve } from '@angular/router'
import { ActivatedRouteSnapshot } from '@angular/router'

@Injectable()
export class DataResolver implements Resolve<any> { 
    constructor(private http: HttpService) { }
    resolve(route: ActivatedRouteSnapshot) {
        return this.http.getData(route.params.id);
    }
}

Then, in your route config:

{
    path: 'data/:id',
    component: DataComponent,
    resolve: { data: DataResolver }
}

The inclusion of the ActivatedRouteSnapshot is optional, you only need it if you're using route data, like params.

Edit: Looking at your example closer, is it possible that the ngDoCheck is firing before the psService subscription does?

来源：https://stackoverflow.com/questions/57666947/get-data-on-the-component-load

标签

javascript

angular

typescript

angular7