Angular中Kendo Grid如何显示roles数组的name属性？

我在Angular应用中使用Kendo Grid，通过generateColumns方法动态生成表格列，数据来自API响应。其中roles是数组属性，当前该列显示[object Object]，无法展示实际的角色名称。

原代码片段 #

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('_', ' '),
    }));

  // 如何修改方法，让roles列显示数组中对象的name属性？

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

API返回数据示例 #

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

修改方案 #

针对roles字段，我们可以在生成列配置时，通过**值访问器（valueAccessor）或单元格模板（cellTemplate）**来转换并展示角色名称：

方式1：使用valueAccessor（推荐，适合文本展示） #

通过valueAccessor将roles数组转换为以逗号分隔的角色名称字符串：

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

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

      // 处理roles列
      if (key === 'roles') {
        column.valueAccessor = (dataItem: any) => {
          // 提取每个角色的name，用逗号拼接
          return dataItem.roles.map((role: any) => role.name).join(', ');
        };
      }

      return column;
    });

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

方式2：使用cellTemplate（适合复杂HTML渲染） #

如果需要更灵活的展示（比如给角色添加样式、标签），可以用cellTemplate自定义单元格内容：

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

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

      if (key === 'roles') {
        column.cellTemplate = (context: any) => {
          // 生成带样式的角色标签
          return context.dataItem.roles.map((role: any) => 
            `<span class="role-tag">${role.name}</span>`
          ).join(' ');
        };
      }

      return column;
    });

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

使用这种方式时，需要确保Kendo Grid允许HTML渲染，或者结合Angular的模板语法定义单独的模板引用。

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