Angular 4：来自 Web 服务的 ag-grid 绑定数据

Question

我正在使用 ag-grid 创建列表页面。我需要调用后端 Web 服务并绑定 JSON 数据并将其显示在 ag-grid 中。

我成功从后端获取数据。但是我没有将它绑定到我的农业网格。有什么办法解决吗？

以下是我的示例代码。

component.html

      <ag-grid-angular #agGrid style="width: 100%; height: 570px;" class="ag-theme-balham"

          [enableSorting]="true"
          [pagination]="true"
          [gridOptions]="gridOptions"
          (gridReady)="onGridReady($event)">
      </ag-grid-angular>

component.ts

constructor(private router: Router, private _profileDistService: ProfileDistService) { 
  this.gridOptions = <GridOptions>{
      paginationPageSize: 18,
      animateRows: true,
      rowSelection: 'multiple'
    };
  this.gridOptions.columnDefs = [
    {
        field: "",
        width: 110,
        checkboxSelection: true

    },
    {
        headerName: "Distributor Code",
        field: "distCd",
        width: 330,
        sortingOrder: ["asc", "desc"]
    },
    {
        headerName: "Distributor Name",
        field: "distName",
        width: 330,
        sortingOrder: ["asc", "desc"]
    },
    {
        headerName: "Status",
        field: "status",
        width: 330,
        sortingOrder: ["asc", "desc"]
    },
    {
        field: "", 
        width: 110, 
        cellRenderer: (data) => {
            return `<mat-icon class="mat-icon material-icons mat-icon-no-color" role="img" aria-hidden="true">
            keyboard_arrow_right</mat-icon>`;
        },
        onCellClicked: (event)=> {
            this.router.navigateByUrl('distributors/General/Edit');
        }
    }
];
const tenantID=   '86930E70D74EF95E16000C02475A5357' ;
this._profileDistService.getProfileDist(tenantID).subscribe((DistData) => {
    var DistDataArray = Object.values(DistData);
    this.gridOptions.rowData = DistDataArray;
},
response => {
    console.log("Error : " + JSON.stringify(response));  
});


}
ngOnInit() {
    this.showGridList = true;
    this.showDistDetail = false;
}


onGridReady(params){
    console.log(params);
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

Answer 1

尝试将数据直接绑定到网格 - 不使用 gridOptions。

<ag-grid-angular #agGrid style="width: 100%; height: 570px;" class="ag-theme-balham"
      [enableSorting]="true"
      [rowData]="rowData"
      [pagination]="true"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)">
</ag-grid-angular>

将 rowData 声明为属性并在组件内部初始化 this.rowData = []。

this._profileDistService.getProfileDist(tenantID).subscribe((DistData) => {
  var DistDataArray = Object.values(DistData);
  this.rowData = DistDataArray;
}

I think gridOptions is used to configure the initial state of the grid. So, if you already have rowData while you're defining gridOptions, then only the data will be considered.

Angular 4：来自 Web 服务的 ag-grid 绑定数据

Angular 4: ag-grid binding data from Web Services

data-binding

ag-grid

angular