为 Syncfusion 网格列定义 ValueAccessor

Question

我正在使用 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' 来解决这个问题，一切都按预期工作，但我不明白原因。

Answer 1

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

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

有关通过 TS 方式为 angular 网格列定义值访问器的更多详细信息，请参阅以下文档 link、

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

请找到以下根据此准备的示例，供您参考，

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

Answer 2

我通过直接使用字段名称设法解决了这个问题：

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

Answer 3

使用值访问器函数，Grid returns 数据直接作为对象类型，因为字段类型是匿名的。这可以在下面的 API 文档 link,

中查看

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

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

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

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

为 Syncfusion 网格列定义 ValueAccessor

Define ValueAccessor for Syncfusion grid column

syncfusion

typescript

ej2-syncfusion