如何解决devextreme_angular错误TypeError_Cannot_assign_to_read_only_property_name_of_function_data

引言#

最近使用devextreme动态绑定grid数据的时候遇到一个异常

1
core.mjs:6494 ERROR TypeError: Cannot assign to read only property 'name' of function 'data => {
2
                    var isCacheUpdated = storeData && storeData !== this._cachedStoreData;
3
        ...<omitted>... }'
4
    at inheritor.setName (ui.grid_core.columns_controller.js:1920:1)
5
    at createColumn (ui.grid_core.columns_controller.js:133:1)
6
    at Function.<anonymous> (ui.grid_core.columns_controller.js:169:1)
7
    at each (iterator.js:25:1)
8
    at createColumnsFromOptions (ui.grid_core.columns_controller.js:167:25)
9
    at inheritor.updateSortingGrouping (ui.grid_core.columns_controller.js:1758:1)
10
    at inheritor.updateColumns (ui.grid_core.columns_controller.js:1682:1)
11
    at inheritor.applyDataSource (ui.grid_core.columns_controller.js:950:1)
12
    at inheritor._handleDataChanged (ui.grid_core.data_controller.js:320:29)
13
    at inheritor._handleDataChanged (ui.grid_core.selection.js:511:1)

但本地测试的时候确实正常,只有发布后才有这个错误

进一步研究之后确定是数据加载过程的问题,本地测试时数据用的静态的;加载瞬间完成,从服务器取数据后绑定列延后了导致报错

只要给本地测试数据添加延迟就能复现问题

return of(dataTemp).pipe(delay(3000));

解决方案#

解决方法就是动态列的创建放在数据取完之后

1
  constructor(private service: Service) {
2
          this.service.getdata().subscribe(data => {
3
                  this.columns.push(<Column>{ isBand: true, caption: xxx,columns:listmidcol });//先创建列
4
                    this.dataGrid.instance.option('dataSource',data);//再绑定数据
5
          }
6
  }

参考资料#

无