解决动态嵌套表格的挑战：基于递归组件的 Angular 解决方案

javascript

2024-03-19 20:55:13

动态嵌套表格的挑战与递归组件解决方案

挑战：应对动态数据和可变嵌套

在 Angular 应用中使用 DevExtreme Master-Detail 组件实现动态嵌套表格时，面临着以下挑战：

动态数据结构：列和行在每次加载数据时可能发生变化，需要灵活处理表格生成和内容展示。
可变嵌套深度：部分行包含嵌套表格，嵌套深度不固定，需要支持多级嵌套。

解决方法：递归组件

为了解决这些挑战，本文提出了一种递归 Angular 组件解决方案。该组件根据数据结构，动态生成表格并处理嵌套表格的展示，确保数据正确显示和管理。

代码实现

@Component({
  selector: 'app-recursive-nested-table',
  template: `<dx-data-grid [dataSource]="dataSource" [showBorders]="true" [allowColumnReordering]="true">
      <dxo-master-detail [enabled]="true" [template]="nestedTables"></dxo-master-detail>
      <div *dxTemplate="let data of nestedTables">
        <app-recursive-nested-table [dataSource]="data"></app-recursive-nested-table>
      </div>
    </dx-data-grid>`
})
export class RecursiveNestedTableComponent {
  @Input() dataSource: any[];

  get nestedTables() {
    return this.dataSource.map((item) => {
      if (item.children && item.children.length) {
        return item.children;
      } else {
        return [];
      }
    });
  }
}

用法

使用此组件非常简单：

@Component({
  selector: 'my-app',
  template: `<app-recursive-nested-table [dataSource]="data"></app-recursive-nested-table>`
})
export class AppComponent {
  data = [
    {
      id: 1,
      name: 'Item 1',
      children: [
        { id: 11, name: 'Item 1.1' },
        { id: 12, name: 'Item 1.2' },
      ],
    },
    {
      id: 2,
      name: 'Item 2',
      children: [
        {
          id: 21,
          name: 'Item 2.1',
          children: [
            { id: 211, name: 'Item 2.1.1' },
          ],
        },
      ],
    },
  ];
}