javascript - 未被捕获的TypeError:无法读取未定义的属性'setDomLayout'-尝试使打印功能与AG-Grid一起使用时出错

一直试图实现一个按钮，单击该按钮时会显示ag-grid，如here所示：

但是，我在api.setDomLayout（'print'）行的setPrinterFriendly上始终遇到错误，提示未捕获的TypeError：无法读取未定义的属性'setDomLayout'。我在这里想念什么吗？

function setPrinterFriendly(api: any) {
  const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
  eGridDiv.style.width = '';
  eGridDiv.style.height = '';
  api.setDomLayout('print');
}
function setNormal(api: any) {
  const eGridDiv = document.querySelector('.my-grid') as HTMLElement;
  eGridDiv.style.width = '600px';
  eGridDiv.style.height = '200px';
  api.setDomLayout(null);
}

export function onBtPrint(params: any) {
  const gridApi = params.api;
  setPrinterFriendly(gridApi);
  setTimeout(() => {
    print();
    setNormal(gridApi);
  }, 2000);
}

这是我下面的主要课程项目。

class Items extends Component<any, ItemsState> {
  private gridApi: any;
  constructor(props: any) {
    super(props);
    this.state = {
      columnDefs: [{
        headerName: 'Store', field: 'store', sortable: true, filter: true, resizable: true, minWidth: 100,
      }, {
        headerName: 'Effective Date',
        field: 'effectiveDate',
        sortable: true,
        filter: true,
        resizable: true,
        minWidth: 150,
      },
         ...
  };
}
onGridReady(params: any) {
    params.api.expandAll();
  }


  onGridSizeChanged(params: any) {
    this.gridApi = params.api;
  }

  render() {
    const { rowData } = this.props;

    const {
      columnDefs, rowClassRules, statusBar,
    } = this.state;

    return (
      <div id="grid-wrapper" style={{ width: '100%', height: '100%' }}>
        <button onClick={onBtPrint.bind(null, this)}>Print</button>
        <div
          id="myGrid"
          style={{
            height: '100%',
            width: '98.5%',
            marginLeft: 13,
            overflow: 'scroll',
          }}
          className="ag-theme-balham my-grid"
        >
          <AgGridReact
            columnDefs={columnDefs}
            rowData={rowData}
            onGridReady={this.onGridReady}
            onGridSizeChanged={this.onGridSizeChanged}
            suppressMenuHide
            statusBar={statusBar}
            enableRangeSelection
            rowClassRules={rowClassRules}
            suppressHorizontalScroll={false}
          />
        </div>
      </div>
    );
  }
}

最佳答案

为了获得预期的结果，请使用以下将params.api分配给this.gridApi onGridReady方法的选项

onGridReady={ params => this.gridApi = params.api }

请参考此链接以获取更多详细信息

https://www.ag-grid.com/react-getting-started/