用angular 写一个树状的table 能点击展开按钮获取下级数据

好的，下面是一个简单的示例，使用Angular Material的cdk-tree组件实现树状表格，点击展开按钮可以获取下级数据。

在这个示例中，我们假设有一个名为Node的数据模型，每个节点都有一个id属性和一个children属性，表示该节点的子节点。我们将创建一个名为TreeTableComponent的组件，用于显示树状表格，并绑定节点数据。

首先需要安装Angular Material和CDK：

npm install --save @angular/material @angular/cdk

接下来，导入所需的Angular Material组件和CDK：

import { Component } from '@angular/core';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatTreeModule } from '@angular/material/tree';

然后，定义Node节点的数据模型：

interface Node {
  id: number;
  children?: Node[];
}

接下来，创建TreeTableComponent组件，定义节点数据和树控件：

@Component({
  selector: 'app-tree-table',
  template: `
    <mat-tree [dataSource]="dataSource">
      <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
        <button mat-icon-button disabled></button>
        {{node.id}}
      </mat-tree-node>

      <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
        <button mat-icon-button (click)="toggleNode(node)">
          <mat-icon>{{node.expanded ? 'expand_more' : 'chevron_right'}}</mat-icon>
        </button>
        {{node.id}}
        <div [class.hidden]="!node.expanded">
          <ng-container matTreeNodeOutlet></ng-container>
        </div>
      </mat-nested-tree-node>
    </mat-tree>
  `
})
export class TreeTableComponent {
  nodes: Node[] = [
    {
      id: 1,
      children: [
        {
          id: 2,
          children: [
            { id: 3 },
            { id: 4 },
            { id: 5 }
          ]
        },
        {
          id: 6,
          children: [
            { id: 7 },
            { id: 8 },
            { id: 9 }
          ]
        }
      ]
    }
  ];

  dataSource = this.nodes;
  
  hasChild = (_: number, node: Node) => !!node.children && node.children.length > 0;

  toggleNode(node: Node) {
    node.expanded = !node.expanded;
    if (node.expanded && !node.children) {
      // load children data
      node.children = [{id: 10}, {id: 11}, {id: 12}];
    }
  }
}

在这个组件中，我们首先定义了一个名为nodes的节点数据数组，它表示树的根节点。然后，我们将该数组绑定到dataSource属性，作为树的数据源。

接下来，我们定义了一个名为hasChild的函数，用于判断节点是否有子节点。如果节点具有子节点，则返回true，否则返回false。

然后，我们定义了一个名为toggleNode的函数，用于切换节点的展开状态。如果节点已经展开，则将其折叠；如果节点是折叠的，则将其展开。如果节点展开且没有子节点，则加载子节点数据，并将其添加到节点的children属性中。

最后，我们在组件的HTML模板中使用Angular Material的cdk-tree组件和MatTreeModule模块来显示树状表格。我们使用matTreeNodeDef指令定义树节点和嵌套树节点，用于在不同的节点级别显示不同的内容。我们使用matTreeNodePadding指令来添加缩进和填充，以使树节点在视觉上分层。我们使用mat-icon-button组件来显示折叠/展开图标，并使用mat-icon组件来显示不同的图标。我们使用ng-container组件来嵌套树节点，并在需要时使用matTreeNodeOutlet指令动态加载子节点。

这样，就实现了一个简单的树状表格组件，可以展开折叠节点并获取子节点数据。