Question

在组件的初始加载上，所有数据均按预期显示。但是当切换到下一页时，网格将清除，并且控制台上会显示以下错误：

错误错误：ag-Grid：在中间时无法使网格绘制行绘制行。当网格处于渲染阶段时，您的代码可能称为网格API方法。为了解决这个问题，请将API调用置于超时中，例如，代替setapi.refreshView（），调用setTimeout（function（）{api.refreshView（），0}）。要查看导致刷新的代码的哪一部分，请检查此堆栈跟踪。

在devices列中没有valueGetter时，分页有效，但是我需要它来更改来自服务的devices数组。

我也使用cellRenderer进行了尝试，但是问题是，分页时内容不会更新，并且在以下页面上始终为空。

这是组件代码：

import { Component, OnInit } from "@angular/core";
import { SensorsListService } from "../services/sensors-list.service";
import { Sensor } from "src/app/shared/models/sensor.model";
import { IDatasource, IGetRowsParams } from "ag-grid-community";

@Component({
  selector: "app-sensors-list",
  templateUrl: "./sensors-list.component.html",
  styleUrls: ["./sensors-list.component.scss"]
})
export class SensorsListComponent implements OnInit {
  sensorsList: Sensor[];
  frameworkComponents: any;
  columnDefs: any;
  rowData: any;
  gridApi: any;
  gridColumnApi: any;

  constructor(
    private sensorsListService: SensorsListService,
  ) {
    this.columnDefs = [
      {
        headerName: "Field ID",
        field: "fieldId",
        sortable: true,
        filter: true,
        autoHeight: true,
        suppressSizeToFit: true,
        width: 100
      },
      {
        headerName: "Name",
        field: "name",
        sortable: true,
        filter: "agTextColumnFilter",
        autoHeight: true,
        width: 300
      },
      {
        headerName: "Device",
        valueGetter: function(params) {
          const devices = [];
          if (params.data.devices.length) {
            params.data.devices.forEach(device => {
              devices.push(device.commNr);
            });
          }
          return devices;
        },
        sortable: true,
        filter: true,
        autoHeight: true,
        suppressSizeToFit: true,
        width: 300
      }
    ];
  }

  dataSource: IDatasource = {
    getRows: (params: IGetRowsParams) => {
      const page = params.startRow / (params.endRow - params.startRow);

      if (Object.keys(params.filterModel).length) {
        this.sensorsListService
          .getFilteredSensorList(params.filterModel.name.filter)
          .subscribe(response => {
            params.successCallback(
              response.body.content,
              response.body.totalElements
            );
          });
      } else {
        this.sensorsListService.getAllSensors(page).subscribe(response => {
          params.successCallback(
            response.body.content,
            response.body.totalElements
          );
        });
      }
    }
  };

  ngOnInit() {}

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridApi.setDatasource(this.dataSource);
    this.gridColumnApi = params.columnApi;
    this.gridApi.sizeColumnsToFit();
  }
}

ag-grid无限滚动分页不起作用/角度

0 个答案: