Question

我认为这很容易。

我的Angular2应用程序中有一个组件，其中一个表由从API解析的数据提供。

一切正常，只有一件事：当我加载页面时，数据不存在;只有在我开始搜索我的过滤器后，该表才会填充。

该组件具有以下方法：

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

通过服务从API收集数据。此方法由ngInit（）方法触发，但返回undefined。只有当我触发方法onChangeTable（）时，我才会在我的视图中得到结果。

我认为我应该在渲染视图之前预先加载数据......

非常感谢提前:)

PS好的，这是我的文件：

服务link
COMPONENT link
TABLE COMPONENT link
HTML link

Answer 1

确定，

我在这里发布解决方案。

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

然后，我在路由器中使用此解析器：

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

最后在我的组件中，我可以得到这个：

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

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

希望能有所帮助。

谢谢：）

从API加载数据后渲染视图 - Angular2

1 个答案: