使用angular 完成一个树状结构表格

要使用 Angular 完成一个树状结构表格，可以使用 Angular Material 中的 `mat-table` 和 `mat-tree` 组件。下面是一个简单的示例：

1. 首先，要安装 Angular Material 和其它必要的依赖项。可以使用以下命令：

   npm install @angular/material @angular/cdk @angular/animations

2. 在模块中导入 `MatTableModule` 和 `MatTreeModule`：

   import { NgModule } from '@angular/core';
   import { MatTableModule } from '@angular/material/table';
   import { MatTreeModule } from '@angular/material/tree';

   @NgModule({
     imports: [MatTableModule, MatTreeModule],
     exports: [MatTableModule, MatTreeModule],
   })
   export class MyMaterialModule {}

3. 在组件中定义数据源和列定义：

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

   interface FoodNode {
     name: string;
     children?: FoodNode[];
   }

   const TREE_DATA: FoodNode[] = [
     {
       name: 'Fruit',
       children: [
         { name: 'Apple' },
         { name: 'Banana' },
         { name: 'Fruit loops' },
       ],
     },
     {
       name: 'Vegetables',
       children: [
         {
           name: 'Green',
           children: [
             { name: 'Broccoli' },
             { name: 'Brussels sprouts' },
           ],
         },
         {
           name: 'Orange',
           children: [
             { name: 'Pumpkins' },
             { name: 'Carrots' },
           ],
         },
       ],
     },
   ];

   @Component({
     selector: 'app-tree-table',
     template: `
       <mat-table [dataSource]="dataSource" matTree>
         <ng-container matColumnDef="name">
           <mat-cell *matCellDef="let node">
             <button mat-icon-button [attr.aria-label]="node.name">
               <mat-icon>{{ node.children ? 'expand_more' : 'crop_square' }}</mat-icon>
             </button>
             {{ node.name }}
           </mat-cell>
         </ng-container>

         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
           <mat-row [ngClass]="{ 'example-tree-invisible': !node.expanded }">
             <mat-cell *matCellDef="let node">{{ node.name }}</mat-cell>
           </mat-row>
         </mat-tree-node>
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>
     `,
     styles: [
       `
         .example-tree-invisible {
           display: none;
         }
       `,
     ],
   })
   export class TreeTableComponent {
     displayedColumns = ['name'];
     dataSource = TREE_DATA;

     hasChild = (_: number, node: FoodNode) =>
       !!node.children && node.children.length > 0;
   }

在上面的示例中，我们定义了一个 `FoodNode` 接口，其中包含节点的名称和子节点。然后，我们定义了一个名为 `TREE_DATA` 的树形数据源，其中包含了 `FoodNode` 对象的数组。接下来，我们在组件中定义了一个 `displayedColumns` 数组，它只包含了一个名为 `name` 的列。然后，我们在 `dataSource` 属性中设置了我们的数据源。最后，我们定义了一个名为 `hasChild` 的方法，用于检查节点是否有子节点。

4. 在模板中使用 `mat-table` 和 `mat-tree`：

   <table mat-table [dataSource]="dataSource" matTree>
     <!-- 行定义 -->
   </table>

在上面的示例中，我们将 `mat-table` 组件的 `matTree` 属性设置为 `true`，以指示我们要使用树形表格。

这是一个简单的树状结构表格的示例，你可以根据自己的需求进行修改和扩展。