Angular 4: ag-grid привязка данных из веб-сервисов

Question

Я создаю страницу со списком, используя ag-grid.Мне нужно вызвать бэкэнд-веб-сервис, связать данные 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;
}

Я думаю, gridOptions используется для настройки начального состояния сетки.Итак, если у вас уже есть rowData, когда вы определяете gridOptions, то будут рассматриваться только данные.