Wijmo FlexGrid切换视图后数字对齐、布尔值显示异常求助

我之前在Angular项目里用Wijmo FlexGrid切换列视图时，也碰到过一模一样的问题——初始加载一切正常，但切换后数字列不对齐、布尔值变成纯文本。折腾了好一阵，终于找到几个靠谱的解决办法，分享给你：

1. 给列循环加上trackBy强制重建列组件 #

问题根源之一可能是Angular的*ngFor默认复用了旧的列组件，而这些旧列已经绑定了之前视图的类型配置，新的columnDefs更新后并没有触发列的重新初始化。

给模板里的*ngFor添加trackBy函数，让Angular在列定义变化时销毁旧列、重建新列：

<wj-flex-grid #dataGrid etc...> 
  <wj-flex-grid-column 
    *ngFor="let col of columnDefs; trackBy: trackByColumn" 
    [binding]="col.binding" 
    [header]="col.caption" 
    [width]="col.width" 
  > 
  </wj-flex-grid-column> 
</wj-flex-grid>

然后在组件类里实现这个trackBy函数：

trackByColumn(index: number, col: any): string {
  // 用列的binding作为唯一标识，确保列定义变化时触发重建
  return col.binding;
}

这个方法通常能解决大部分类型渲染失效的问题，因为FlexGrid会重新识别每列的数据类型并应用对应的渲染器。

2. 手动配置列的类型与渲染器 #

如果trackBy还没解决问题，可以在列定义更新后，手动遍历FlexGrid的列，强制设置数据类型对应的格式和渲染器：

首先通过ViewChild获取FlexGrid实例：

import { ViewChild, AfterViewChecked } from '@angular/core';
import { FlexGrid } from '@grapecity/wijmo.grid';

@Component({/* ... */})
export class YourComponent {
  @ViewChild('dataGrid') dataGrid: FlexGrid;
  // ... 其他代码

然后在加载列定义的回调里，添加列配置逻辑：

private getLayout(): void { 
  this.layoutService.get(this.dataName).subscribe( 
    (result: ViewDef) => { 
      this.caption = result.caption; 
      this.columnDefs = result.columnDefs;
      // 延迟执行，确保Angular已经更新了DOM中的列
      setTimeout(() => {
        this.setupColumnRenderers();
      }, 0);
    }, 
    () => console.log('Could not load layout.') 
  ); 
}

private setupColumnRenderers(): void {
  if (!this.dataGrid || !this.columnDefs) return;
  
  this.dataGrid.columns.forEach((col, index) => {
    const colDef = this.columnDefs[index];
    // 假设你的columnDef里有type字段，比如'number'、'boolean'
    switch(colDef.type) {
      case 'number':
        col.align = 'right';
        // 可选：添加数字格式化，比如保留两位小数
        col.format = 'n2';
        break;
      case 'boolean':
        // 设置布尔列的单元格模板为禁用的复选框（如果需要可编辑，去掉disabled）
        col.cellTemplate = '<input type="checkbox" disabled [checked]="item[col.binding]"/>';
        // 如果需要支持编辑，还可以设置编辑器
        // col.editor = new wijmo.input.CheckBox();
        break;
    }
  });
}

3. 检查数据源的类型正确性 #

有时候后端返回的数据类型不对——比如布尔值是字符串"true"，数字是字符串"123"，这时候FlexGrid会把它们当成普通文本处理，自然不会应用数字对齐或布尔复选框。

在设置itemsSource之前，先转换数据类型：

private setItemsSource(result: any[]) {
  // 预处理数据，转换类型
  const processedData = result.map(item => {
    const processed = {...item};
    // 根据你的字段名调整，比如布尔列isEnabled，数字列totalAmount
    if (processed.isEnabled !== undefined) {
      processed.isEnabled = processed.isEnabled === true || processed.isEnabled === 'true' || processed.isEnabled === 1;
    }
    if (processed.totalAmount !== undefined) {
      processed.totalAmount = Number(processed.totalAmount);
    }
    return processed;
  });
  
  // 后续代码改用processedData
  this.dataGrid.beginUpdate();
  // ... 保存选中状态等逻辑
  this.dataGrid.itemsSource = new wijmo.collections.CollectionView(processedData);
  // ... 恢复状态等逻辑
  this.dataGrid.endUpdate();
}

总结 #

优先试试trackBy方法，这是最简洁的解决方案；如果还是不行，再手动配置列渲染器；最后别忘了检查数据源的类型是否正确。这三个步骤下来，应该能解决你遇到的格式失效问题。

内容的提问来源于stack exchange，提问作者Kay van Bree