从API加载数据后呈现视图-Angular2

Question

I think this is an easy one.

I have a component in my Angular2 application, with a table feeded by a data parsed from an API.

Everything works fine exept for one thing: when I load my page the data is not present; only after I start a search on my filter the table populates.

The component has this method:

getList() {
    return this.service.getList()
        .subscribe(tasks => {
            this.data = tasks
        });
}

to collect the data from the API through a service. This method is triggered by ngInit() method, but returns undefined. Only if I fire the method onChangeTable() I get the results in my view.

I think I should have to preload data before render view ...

Many thanks in advance :)

PS Ok, here are my files:

• SERVICE link
• COMPONENT link
• TABLE COMPONENT link
• HTML link

Answer 1

Ok,

I post here the solution.

The implementation of a Resolver does the trick.

I created a Resolver:

import {Resolve, RouterStateSnapshot, ActivatedRouteSnapshot} from "@angular/router";
import {Injectable} from "@angular/core";
import {TaskService} from "../services/task.service";
import {Observable} from "rxjs";

@Injectable()
export class TaskResolver implements Resolve<any> {
    constructor(private service: TaskService) {}

    resolve(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<any>|Promise<any>|any {
        return this.service.getList();
    }
}

Then, I use this Resolver in my Router:

...
{path: '', component: ListTaskComponent, resolve: { data: TaskResolver }},

And finally in my component, I can get this:

public constructor(private route:ActivatedRoute) {
    ...
}

public ngOnInit():void {
    this.data = this.route.snapshot.data['data'];
    this.onChangeTable(this.config)
}

Hope that helps guys.

Thank you :)