Angular 角度4：来自Web服务的ag网格绑定数据

我正在使用ag网格创建一个列表页面。我需要调用后端web服务，绑定JSON数据并在ag网格中显示它

我成功地从后端获取数据。但我没能把它绑定到我的ag网格上。 有什么解决办法吗？怎么解决

下面是我的示例代码

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>

组件技术

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

构造函数（专用路由器：路由器，专用_profileDistService:profileDistService）{
this.gridOptions={
分页PageSize:18，
动画师：没错，
行选择：“多个”
};
this.gridOptions.columnDefs=[
{
字段：“”，
宽度：110，
复选框选择：true
},
{
headerName:“分销商代码”，
字段：“distCd”，
宽度：330，
排序顺序：[“asc”、“desc”]
},
{
headerName:“分销商名称”，
字段：“distName”，
宽度：330，
排序顺序：[“asc”、“desc”]
},
{
头名：“身份”，
字段：“状态”，
宽度：330，
排序顺序：[“asc”、“desc”]
},
{
字段：“”，
宽度：110，
cellRenderer：（数据）=>{
返回`
键盘箭头右键`；
},
onCellClicked：（事件）=>{
这个.router.navigateByUrl（'distributors/General/Edit'）；
}
}
];
const tenantID='86930E70D74EF95E16000C02475A5357'；
此._profileDistService.getProfileDist（tenantID）.subscribe（（DistData）=>{
var DistDataArray=Object.values（DistData）；
this.gridOptions.rowData=DistDataArray；
},
响应=>{
log（“错误：+JSON.stringify（响应））；
});
}
恩戈尼尼特（）{
this.showGridList=true；
this.showDistDetail=false；
}
onGridReady（参数）{
控制台日志（params）；
this.gridApi=params.api；
this.gridColumnApi=params.columnApi；
}

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

网格选项

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

我认为
gridOptions
用于配置网格的初始状态。因此，如果您在定义
gridOptions
时已经有
rowData
，那么只考虑数据

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