在 TypeScript 中动态创建属性

Question

我正在使用 DevExpress (devextreme) 的 DataGrid 构建数据输入应用程序，并允许用户添加和删除键列以外的列。我将列配置和用户数据都存储在 SQL 中。用户数据存储为

Key | ColumnName        | ColumnValue
-------------------------------------
1     Company             Apple
1     NumberOfEmployees   12345

然后我旋转数据以发送到网格。

Key | Company | NumberOfEmployees
---------------------------------
1     Apple     12345

当用户更新网格中的一行时，网格会传回一个包含每一列属性的数据对象。我正在使用列定义来尝试查找和匹配这些属性，但没有得到预期的结果。

const userColumns: any[] = [
    {
        ColumnName: 'Company'
    }, {
        ColumnName: 'NumberOfEmployees'
    }
];

const returnedFromGridRow: Record<string,any> = {};
returnedFromGridRow.Company = 'Apple';
returnedFromGridRow.NumberOfEmployees = 12345;

let result: Record<string,any> = {};
const results: any = [];

userColumns.forEach(function (value) {
  let x: string = value.ColumnName;
  let y: string = returnedFromGridRow[x];
  
  result = {x:y};
  console.log(result);
  results.push(result);
});

期待中

{ "Company" : "Apple" }
{ "NumberOfEmployees" : 12345 }

但是得到

{ "x" : "Apple" }
{ "x" : 12345 }

Playground

Answer 1

您用来创建 result 对象的方法将不起作用，因为它使用 x 作为键。要动态指定键，请更改创建动态对象的方式，如下所示以获得预期结果：

userColumns.forEach(function (value) {
  let x: string = value.ColumnName;
  let y: string = returnedFromGridRow[x];
  
  result[x]=y; // This is the change
  console.log(result);
  results.push(result);
});

在 TypeScript 中动态创建属性

Creating Properties Dynamically in TypeScript

typescript

dynamic

devextreme