ag-grid 未从 angular2 中的 Web api 输出加载数据行

Question

我正在调用网络 api 来获取行，然后将此数据加载到 ag-grid 中。但是网格在返回 json 数据之前被初始化，所以无法显示。这是我的代码。

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() 方法 returns 通过调用服务然后进行 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

我删除了 ngOnInit() 中的所有内容。在构造函数中，我刚刚分配如下。

this.accessService.getRoles().subscribe(
                (res: any)=>{
                    this.rowData = res;                       
                    }
);

因为已经在网格中分配了属性值，设置 this.rowData=response，设置行值。

这解决了我的问题..

ag-grid 未从 angular2 中的 Web api 输出加载数据行

ag-grid not loading data rows from web api output in angular2

rows

asp.net-web-api

ag-grid-ng2

angular