使用 Angular 在 Kendo Grid 列中显示嵌套属性

Question

问题：

我的 Angular 应用程序中有一个 Kendo 网格，并且我使用generateColumns 方法动态生成网格的列。数据来自 API 响应，其中一个属性是角色数组。

这是generateColumns方法的片段：

    generateColumns(dataItem: any): void {
  const excludedColumns = ['password'];

  const columns = Object.keys(dataItem)
    .filter((key) => !excludedColumns.includes(key))
    .map((key) => ({
      field: key,
      title: key.charAt(0).toUpperCase() + key.slice(1).replace('_', ' '),
    }));

  // How can I modify the method to display the 'name' property of the 'roles' array in the 'role' column?

  console.log(columns);
  this.administration.columns = columns;
}

“dataItem”对象有一个“roles”属性，它是一个对象数组。当我在 Kendo Grid 中显示此内容时，“角色”列显示 [object Object] 而不是实际的角色名称。

这是 JSON 数据的示例：

    {
  "id": 24,
  "username": "john_doe2",
  "roles": [
    {
      "id": 2,
      "name": "employee",
      "desc": "employee"
    },
    {
      "id": 1,
      "name": "admin",
      "desc": "admin"
    }
  ]
}

还包括网格表的屏幕截图

Answer 1

如果您想在角色列中显示嵌套的“角色”，您可以使用网格单元模板，并访问和显示您需要的任何嵌套属性，例如：

https://stackblitz.com/edit/angular-dhztt1?file=src%2Fapp%2Fapp.component.ts

可以根据相应列配置对象的某些属性有条件地显示模板，例如：

https://stackblitz.com/edit/angular-dhztt1-da4znn?file=src%2Fapp%2Fapp.component.ts