为 Syncfusion 网格列定义 ValueAccessor答案

【问题标题】：Define ValueAccessor for Syncfusion grid column为 Syncfusion 网格列定义 ValueAccessor
【发布时间】：2021-12-11 04:46:14
【问题描述】：

我正在使用SyncFusion Grid，并为特定列定义了valueAccessor，如下所示：

export interface GridColumn<idT> {
  ...
  valueAccessor?: (
    field: string,
    data: GridData<idT>,
    column: Column
  ) => ValueAccessor | string;
}

这是列定义：

{
     field: 'decimalCount',
     headerText: 'Decimals',
     textAlign: GridTextAlign.Center,
     headerTextAlign: GridTextAlign.Center,
     width: 50,
     editType: GridEditType.NumericTextBox,
     valueAccessor: (
        field: string,
        data: Partial<CustomDataGridData>
     ): string => data[field] ?? 'N/A',
}

但我收到以下错误

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Partial<CustomDataGridData>'.
No index signature with a parameter of type 'string' was found on type 'Partial<CustomDataGridData>'.

在html 文件中，valueAccessor 的应用如下：

<e-column
    ...
    [valueAccessor]="column.valueAccessor ?? null"
>

我已设法通过将 data 对象转换为 any => (data as any)[field] ?? 'N/A' 来解决此问题，并且一切正常，但我无法理解原因。

【问题讨论】：

标签： typescript syncfusion ej2-syncfusion

【解决方案1】：

从共享代码 sn-p 中，我可以看到您为数据参数设置了自定义类型，并且错误显示数据中返回的“字符串”类型值不存在于该自定义接口中。所以对于这种情况，请直接将数据类型设置为 Object，如下面的代码 sn-p 所示，

{field: 'decimalCount', valueAccessor: (field: string, data: Object): string => data[field] ?? 'N/A'}

有关通过 TS 方式为 Angular Grid 列定义值访问器的更多详细信息，可以在以下文档链接中查看，

文档： https://ej2.syncfusion.com/documentation/grid/columns/#valueaccessor

请在此基础上找到以下示例供您参考，

示例： https://stackblitz.com/edit/angular-8azapo-z2qdpl?file=app.component.ts

【讨论】：

我也试过Object，但错误仍然存在Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Object'. No index signature with a parameter of type 'string' was found on type 'Object'

【解决方案2】：

我设法通过直接使用字段名称来解决此问题：

valueAccessor: (_,data: Partial<CustomDataGridData>): string | number => data.decimalCount ?? 'N/A',

【讨论】：

【解决方案3】：

使用值访问器函数，Grid 直接将数据作为 Object 类型返回，因为字段类型是匿名的。这可以在下面的 API 文档链接中查看，

API： https://ej2.syncfusion.com/documentation/api/grid/valueAccessor/

但是在共享代码中可以看出，您已经为示例级别的值访问器函数数据定义了自定义类型（数据：GridData）。这将导致上述问题，因为从 Grid 返回的 Object 类型的数据将与此自定义类型不匹配。

因此，您可以通过在示例级别 GridColumn 接口中将数据类型设置为 Object 来解决此问题，如下面的代码 sn-p 所示，

export interface GridColumn<idT> { ...
valueAccessor?: (
    field: string,
    data: Object,
    column: Column
) => ValueAccessor | string; }

【讨论】：