從API加載數據後渲染視圖 - Angular2

我在我的Angular2應用程序中有一個組件，其中一個表從一個API中解析出一個數據。

一切工作正常免除一件事：當我加載我的網頁的數據不存在;只有在我開始搜索我的過濾器後，表纔會填充。

該組件具有此方法：

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

通過服務以收集來自API的數據。該方法由ngInit（）方法觸發，但返回未定義。只有當我觸發onChangeTable（）方法時，我才能看到結果。

我覺得我應該要載入數據之前渲染視圖...

提前:)感謝

PS好的，這是我的文件：

服務link
COMPONENT link
TABLE COMPONENT link
HTML link

來源

2016-12-01 Mauro

html是怎麼樣的？ – micronyks

這裏是一個部分： ' 0」 [配置] = 「配置」（tableChanged）= 「onChangeTable（配置）」（cellClicked）=「onCellClick（$事件）「 [columns] =」columns「 [rows] =」rows「> ' – Mauro

也許您應該閱讀[如何創建最小，完整和可驗證的示例]（http://stackoverflow.com/help/MCVE）。 – n00dl3

好吧，

我張貼在這裏的解決方案。

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

希望能幫助大家。

謝謝:)

來源

2016-12-02 11:10:05 Mauro

從API加載數據後渲染視圖 - Angular2

回答

相關問題