javascript - 未捕获的类型错误 : Cannot read property 'setDomLayout' of undefined - Error when trying to make print function work with AG-Grid

Question

一直在尝试实现一个按钮，该按钮在单击时打印 ag-grid，如图所示 here :

但是，我在 api.setDomLayout('print') 行的 setPrinterFriendly 中不断收到错误消息，上面写着 Uncaught TypeError: Cannot read property 'setDomLayout' of undefined。我在这里错过了什么吗？

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)项目。

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

Answer 1

为了达到预期的结果，使用下面的选项将 params.api 分配给 this.gridApi onGridReady 方法

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

更多详情请引用此链接

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