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

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

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
}