Syncfusion EJ2 Angular表格显示OData元数据列问题求助

使用Syncfusion EJ2 Angular Spreadsheet组件展示OData数据源数据，已通过ODataV4Adaptor完成数据获取并正常运行，但存在两个问题：

1. 表格显示OData元数据列（如No@odata.type这类属性）
2. 日期字段格式不符合需求

后端模型示例 #

public class DataImportRowData
{
    [Key]
    public long? Id { get; set; }
    public int Index1 { get; set; }
    [NotMapped]
    public string Data { get; set; }
    
    public IDictionary<string, object> RowData =>
        JsonConvert.DeserializeObject<Dictionary<string, object>>(Data);
}

前端DataManager配置 #

public data?: DataManager;
this.data = new DataManager({
            url: 'xxxx?$orderby=Index1',
            adaptor: new ODataV4Adaptor(),
            crossDomain: true
          });

HTML模板 #

<ejs-spreadsheet #spreadsheet [height]="1000" (created)="created(dataImport)">
   <e-sheets>
     <e-sheet [name]="dataImport.name">
       <e-ranges>
         <e-range [dataSource]="data"></e-range>
       </e-ranges>
     </e-sheet>
   </e-sheets>
</ejs-spreadsheet>

一、移除OData元数据列 #

方法1：通过DataManager的Query筛选字段 #

直接在DataManager配置中指定需要加载的业务字段，过滤元数据属性：

import { Query } from '@syncfusion/ej2-data';

this.data = new DataManager({
    url: 'xxxx?$orderby=Index1',
    adaptor: new ODataV4Adaptor(),
    crossDomain: true,
    query: new Query().select(['Id', 'Index1', 'RowData']) // 仅选择需要展示的字段
});

方法2：在Spreadsheet创建事件中删除冗余列 #

通过created事件获取列集合，过滤掉包含@odata.type的列：

import { Spreadsheet } from '@syncfusion/ej2-angular-spreadsheet';
import { ViewChild } from '@angular/core';

// 在组件中获取Spreadsheet实例
@ViewChild('spreadsheet') spreadsheet: Spreadsheet;

created(dataImport: any) {
    const activeSheet = this.spreadsheet.getActiveSheet();
    // 过滤掉含@odata.type的列
    const filteredColumns = activeSheet.columns.filter(col => !col.field?.includes('@odata.type'));
    // 更新列配置并刷新
    this.spreadsheet.updateColumn(filteredColumns);
    this.spreadsheet.refresh();
}

二、格式化日期列 #

方法1：在列配置中直接指定格式 #

在<e-columns>中为日期字段设置format属性：

<ejs-spreadsheet #spreadsheet [height]="1000" (created)="created(dataImport)">
   <e-sheets>
     <e-sheet [name]="dataImport.name">
       <e-columns>
         <!-- 假设RowData中的DateField是日期字段，设置为yyyy-MM-dd格式 -->
         <e-column field="RowData.DateField" format="yyyy-MM-dd"></e-column>
         <e-column field="Id"></e-column>
         <e-column field="Index1"></e-column>
       </e-columns>
       <e-ranges>
         <e-range [dataSource]="data"></e-range>
       </e-ranges>
     </e-sheet>
   </e-sheets>
</ejs-spreadsheet>

方法2：在创建事件中动态识别并设置格式 #

如果日期字段是动态生成的，可在created事件中遍历单元格，识别日期类型并设置格式：

created(dataImport: any) {
    const activeSheet = this.spreadsheet.getActiveSheet();
    // 遍历数据行（表头在第1行，数据从第2行开始）
    for (let rowIndex = 1; rowIndex < activeSheet.rows.length; rowIndex++) {
        const row = activeSheet.rows[rowIndex];
        if (row.cells) {
            row.cells.forEach(cell => {
                // 判断单元格值是否为日期类型
                if (cell.value instanceof Date) {
                    cell.format = 'yyyy-MM-dd'; // 自定义日期格式
                }
            });
        }
    }
    this.spreadsheet.refresh();
}

内容的提问来源于stack exchange，提问作者loggo