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

【问题标题】：Render view after data loading from an API - Angular2从 API 加载数据后渲染视图 - Angular2
【发布时间】：2016-12-01 15:35:53
【问题描述】：

我认为这很容易。

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

除了一件事之外，一切都很好：当我加载我的页面时，数据不存在；只有在我开始搜索我的过滤器后，表格才会填充。

组件有这个方法：

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

通过服务从 API 收集数据。该方法由 ngInit() 方法触发，但返回 undefined。只有当我触发 onChangeTable() 方法时，我才能在视图中看到结果。

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

提前非常感谢:)

PS 好的，这是我的文件：

服务link
组件link
表格组件link
HTML link

【问题讨论】：

html长什么样子？
这里是一部分：<ng-table *ngIf="length > 0" [config]="config" (tableChanged)="onChangeTable(config)" (cellClicked)="onCellClick($event)" [columns]="columns" [rows]="rows"> </ng-table>
也许你应该阅读How to create a Minimal, Complete, and Verifiable example。

标签： angular angular2-routing angular2-template angular2-services

【解决方案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)
}

希望对大家有所帮助。

谢谢你:)

【讨论】：