我的农业网格没有显示任何数据

Question

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

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

我的网格-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
        },

    ]; 
  } 
}

我的网格-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)
  }
}

data.json

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

我的网格-application.component.html

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

Answer 1

当触发 onGridReady() 时，"this.things" 尚未填充。试试这个：

var gridOptions = {
    rowData: this.things
}

Answer 2

我不是 Ag-Grid 专家，但你为什么在构造函数中使用 re-declaring gridOptions 和 var gridOptions。这是明显的错误，应该更正：

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

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

勾选这个StackBlitz from my Github

//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
        },

    ]; 
}

我的农业网格没有显示任何数据

My ag-grid doesnt show up any Data

javascript

json

ag-grid

angular