从graphql填充时无法编辑ag-grid-react网格中的单元格

时间:2018-03-13 05:05:19

标签: typescript ag-grid-react

使用ag-grid和react andtypescript,我有一个定义为可编辑的列,它使用GraphQL查询中的数据(保持状态)进行初始化。

编辑单元格时出现以下错误: TypeError:无法指定对象'#'

的只读属性'destination'

它所涉及的代码是     ValueService ../ node_modules / AG-网格/ DIST / LIB / valueService / valueService.js.ValueService.setValue

enter image description here

有谁知道它试图存储更改的值的位置以及发生这种情况的原因?

代码片段:

componentWillMount() {
    // we use state because the columns might change dynamically
    this.setState( {   columnDefs: this.createColumnDefs() });
}
createColumnDefs() {
    return [
        { colId: 'b', headerName: 'ID', field: 'rowID', hide: true },
        { colId: 'c', headerName: 'Name No.', field: 'nameNo', hide: true },
        { colId: 'h', headerName: 'Destination', field: 'destination', editable: true},
        { colId: 'i', headerName: 'CopyTo', field: 'copyTo', editable: true },
        { colId: 'j', headerName: 'Subject', field: 'subject', editable: true },
        { colId: 'k', headerName: 'Body', field: 'body', editable: true }
    ];
}
componentWillReceiveProps(nextProps: SelectionQueryProps) {
    ........
    // props come from an Apollo/GraphQL wrapper so setting it in state
    this.setState( { data: nextProps.data } );
    }
}
render() {
    if (!this.state.data || this.state.data.loading || !this.state.data.statementCreation) {
        return <div><Loader active={true} inline="centered" size="large" /></div>;
    }
    return (
                    <AgGridReact
                        animateRows={true}
                        enableColResize={true}
                        enableFilter={true}
                        enableSorting={true}
                        enableRangeSelection={true}
                        rowModelType="inMemory"
                        columnDefs={this.state.columnDefs}
                        singleClickEdit={true}
                        stopEditingWhenGridLosesFocus={true}
                        rowSelection={'multiple'}
                        onGridReady={this.onGridReady}
                        onRowSelected={this.onRowSelected}
                        suppressRowClickSelection={this.props.generate}
                    />
    );
}
private onGridReady = (params: GridReadyEvent) => {
    this.gridApi = params.api;
    if (this.state.data && !this.state.data.loading && this.state.data.statementCreation) {
        params.api.setRowData(this.state.data.statementCreation);
        params.columnApi.autoSizeAllColumns('autosizeColumns');
        params.api.sizeColumnsToFit();
    }
}

0 个答案:

没有答案