ag-grid ne charge pas les lignes de données de la sortie web api dans angular2

Question

J'appelle web api pour obtenir des lignes, puis charger ces données dans la grille. Mais la grille est initialisée avant que les données json soient retournées, donc pas en mesure de montrer. Voici mon code.

myComponent.component.html

<ag-grid-ng2 style="width: 400px; height: 115px;" 
      class="ag-fresh" 
      [gridOptions] ="gridOptions"     
      [columnDefs]="columnDefs" 
      [rowData]="rowData"> 
</ag-grid-ng2> 

myComponent.component.ts

import { Component, OnInit } from '@angular/core'; 
import { AgGridModule, AgGridNg2 } from 'ag-grid-ng2/main'; 
import { GridOptions } from 'ag-grid/main'; 
import { AccessService } from './access/access.service'; 
import { Observable } from 'rxjs/Observable'; 
import { Http, Response } from '@angular/http'; 

@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit{ 

//gridOptions: GridOptions; 
gridOptions:any; 
columnDefs: any[]; 
rowData: any[]; 

ngOnInit() { 
    this.gridOptions = { 
     enableSorting: true, 
     rowData: this.rowData, 
     columnDefs: this.columnDefs, 
     OnInit:() =>{ 
      console.log('dfd'); 
      this.gridOptions.api.rowData = this.rowData; 
     }, 
     onReady:() => { 
      this.gridOptions.api.sizeColumnsToFit();     
     } 
    } 
} 

constructor(private accessService: AccessService) {   
    this.rowData = this.returnRows(); 

    this.gridOptions = <GridOptions>{}; 
    //this.gridOptions = {}; 
    this.columnDefs = [ 
     {headerName: "Role Id", field: "RoleId"}, 
     {headerName: "Role Name", field: "RoleName"} 
    ];  

    console.log(this.rowData); 

} 

returnRows() {  
var rowData: any; 
// rowData = this.accessService.getRoles(); 
this.accessService.getRoles().subscribe(
    (res: any)=>{ 
     console.log("res 1: " + res._body); 
     rowData=res._body; 
    } 
);   
    return rowData; 
    } 
} 

returnRows() Methode renvoie des lignes en appelant le service qui a ensuite fait appel http.

access.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/Rx'; 

@Injectable() 
export class AccessService { 
    constructor(private http: Http){   
} 

private getRolesUrl = "http://localhost:52800/api/Event/GetUserRoles/3579"; 

getRoles() { 
return this.http.get(this.getRolesUrl) 
       .map(res => { 
        // console.log(res.json()); 
        const roles = res; 
        return roles; 
       } 
       ) 
       .catch(this.handleError); 
    } 

    private handleError (error: Response) { 
    console.error("error: "+error); 
    return Observable.throw(error.json().error || 'Server error'); 
    } 

} 

Answer 1

J'ai enlevé tout à l'intérieur du ngOnInit(). En constructeur, je viens d'assigner comme suit. Comme il y a déjà une valeur de propriété affectée dans la grille, en définissant this.rowData = réponse, définit les valeurs de ligne. Cela a résolu mon problème ..