我的 ag-grid 没有显示任何数据

Question

我对 Angular/Typescript 相当陌生。我有点学习和发展的同时。我试图用从 Json 文件加载的数据构建一个网格，并且在显示我的数据时遇到了一些问题。如果你们能指出我的错误，我会很高兴，因为我的代码编译时没有错误，我现在有点无助。

我将在下面提供我的代码。 提前致谢。

my-grid-application.component.ts

@Component({
  selector: 'app-my-grid-application',
  templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
  private gridOptions: GridOptions;
  things:Things[];

  getThings(){
    this.myGridApplicationService.getThings().subscribe( things => 
this.things = things)
  }

constructor( private myGridApplicationService: MyGridApplicationService) {
    this.gridOptions = <GridOptions>{};
    var gridOptions = {
        onGridReady: function() {
    this.gridOptions.api.setRowData(this.things);
        }
    }
    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100
        },
        {
            headerName: "Value",
            field: "value",
            cellRendererFramework: RedComponentComponent,
            width: 100
        },

    ]; 
  } 
}

my-grid-application.service.ts

export class Things{

}

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

  getThings(){
    return this.http.get('src/assets/data.json')
        .map((response:Response)=> <Things[]>response.json().data)
  }
}

数据.json

{
"data" :[
    {
        "id": "red",
        "value": "#f00"
    },
    {
        "id": "green",
        "value": "#0f0"
    }
]
}

my-grid-application.component.html

<div style="width: 200px;">
  <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-
theme-fresh"
           [gridOptions]="gridOptions">

Answer 1

我不是 Ag-Grid 专家，但为什么要在构造函数中使用 var gridOptions 重新声明 gridOptions。这是明显的错误，应该纠正：

this.gridOptions = {
    onGridReady: function() {
        this.gridOptions.api.setRowData(this.things);
    }
}

因为这是您在模板中访问的属性。

在我的Github 中查看这个StackBlitz

//MyGridApplication
constructor( private myGridApplicationService: MyGridApplicationService) {
    myGridApplicationService.getThings()
        .subscribe( things => this.things = things);

    this.gridOptions = <GridOptions>{};
    this.gridOptions = {
        onGridReady: () => {
            this.gridOptions.api.setRowData(this.things);
        }
    };

    this.gridOptions.columnDefs = [
        {
            headerName: "ID",
            field: "id",
            width: 100
        },
        {
            headerName: "Value",
            field: "value",
            cellRendererFramework: RedComponentComponent,
            width: 100
        },

    ]; 
} 

Answer 2

当 onGridReady() 被触发时，“this.things”还没有被填充。 试试这个：

var gridOptions = {
    rowData: this.things
}