Angular中DevExtreme嵌套DataGrid实现失败，求解决方案

核心配置要点 #

• 主DataGrid必须启用masterDetail模式，并指定自定义模板承载子Grid
• 子DataGrid需通过模板上下文获取当前主行的嵌套数据，确保数据绑定正确
• 统一主/子Grid的基础配置（如分页、排序），避免样式或功能冲突

完整代码示例 #

TypeScript 组件代码

import { Component } from '@angular/core';

// 定义数据结构
interface ParentData {
  id: number;
  name: string;
  children: ChildData[];
}

interface ChildData {
  childId: number;
  childName: string;
  value: number;
}

@Component({
  selector: 'app-nested-grid',
  templateUrl: './nested-grid.component.html'
})
export class NestedGridComponent {
  // 模拟数据源
  parentDataSource: ParentData[] = [
    {
      id: 1,
      name: '父项1',
      children: [
        { childId: 101, childName: '子项1-1', value: 20 },
        { childId: 102, childName: '子项1-2', value: 30 }
      ]
    },
    {
      id: 2,
      name: '父项2',
      children: [
        { childId: 201, childName: '子项2-1', value: 40 },
        { childId: 202, childName: '子项2-2', value: 50 }
      ]
    }
  ];

  // 获取子Grid数据源（可选，直接绑定上下文数据也可）
  getChildDataSource(parentRow: ParentData): ChildData[] {
    return parentRow.children;
  }
}

HTML 模板代码

<dx-data-grid
  [dataSource]="parentDataSource"
  [masterDetail]="{ enabled: true, template: 'detailTemplate' }"
  keyExpr="id"
>
  <!-- 主Grid列配置 -->
  <dxi-column dataField="id" caption="父ID"></dxi-column>
  <dxi-column dataField="name" caption="父名称"></dxi-column>

  <!-- 子Grid模板 -->
  <div *dxTemplate="let parentRow of 'detailTemplate'">
    <dx-data-grid
      [dataSource]="getChildDataSource(parentRow)"
      keyExpr="childId"
      [showBorders]="true"
      [height]="200"
    >
      <dxi-column dataField="childId" caption="子ID"></dxi-column>
      <dxi-column dataField="childName" caption="子名称"></dxi-column>
      <dxi-column dataField="value" caption="数值"></dxi-column>
    </dx-data-grid>
  </div>
</dx-data-grid>

依赖版本校验 #

确保package.json中依赖版本兼容（以Angular 16 + DevExtreme 23.1为例）：

{
  "dependencies": {
    "@angular/core": "^16.0.0",
    "devextreme": "^23.1.3",
    "devextreme-angular": "^23.1.3",
    // 其他依赖...
  }
}

常见问题排查 #

1. 子Grid不显示：检查masterDetail.enabled是否设为true，模板上下文变量（如parentRow）是否正确获取主行数据，确认子数据数组不为空
2. 样式错乱：给子Grid设置固定height，避免父Grid布局挤压；开启子Grid的showBorders便于区分层级
3. 功能异常：确保主/子Grid的keyExpr分别设置为各自数据的唯一标识字段，避免数据绑定冲突

内容的提问来源于stack exchange，提问作者Álvaro