preview image
https://angular-table-tree-example-md58kf.stackblitz.io
早上好，有人能帮我知道如何用单选按钮获取选中的行吗，表是用树表示的，我在下面的链接中附上代码：https://stackblitz.com/edit/angular-table-tree-example-md58kf?file=app/table-basic-example.ts
ps：我正在使用谷歌翻译
这是我试着做的代码
HTML语言

<table mat-table [dataSource]="dataSourceTree" class="mat-elevation-z8">
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>
      <span [style.paddingLeft.px]="40"> Name </span>
    </th>
    <td mat-cell *matCellDef="let data">
      <div
        *ngIf="data.group"
        [style.marginLeft.px]="data.level * 20"
        style="display: inline"
      >
        <mat-radio-button
          class="example-radio-button"
          [checked]="data.selected"
          [name]="data.group"
          [value]="data"
        >
        </mat-radio-button>
      </div>

      {{data.name}}
    </td>
  </ng-container>

  <ng-container matColumnDef="count">
    <th mat-header-cell *matHeaderCellDef>Code</th>
    <td mat-cell *matCellDef="let data">
      <div
        *ngIf="data.group"
        [style.marginLeft.px]="data.level * 20"
        style="display: inline"
      ></div>

      {{data.count}}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<button (click)="getSelected()">show items selected</button>

typescript

import { FlatTreeControl } from '@angular/cdk/tree';
import { Component } from '@angular/core';
import {
  MatTreeFlatDataSource,
  MatTreeFlattener,
} from '@angular/material/tree';

interface FoodNode {
  name: string;
  count?: number;
  children?: FoodNode[];
  group?: number;
  selected?: boolean;
  expandable?: boolean;
  level?: number;
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Math',
    count: 11,
    children: [
      { name: 'MAT1A', count: 10, group: 1 },
      { name: 'MAT1B', count: 20, group: 1 },
      { name: 'MAT1C', count: 30, group: 1 },
    ],
  },
  {
    name: 'Physical',
    count: 22,
    children: [
      { name: 'FIS1A', count: 40, group: 2 },
      { name: 'FIS1B', count: 50, group: 2 },
      { name: 'FIS1C', count: 60, group: 2 },
    ],
  },
];

/**
 * @title Basic use of `<table mat-table>`
 */
@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['name', 'count'];

  private transformer = (node: FoodNode, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      count: node.count,
      level: level,
      group: node.group,
      FoodNode: node.children,
      selected: node.selected,
    };
  };

  treeControl = new FlatTreeControl<FoodNode>(
    (node) => node.level,
    (node) => node.expandable
  );

  treeFlattener = new MatTreeFlattener(
    this.transformer,
    (node) => node.level,
    (node) => node.expandable,
    (node) => node.children
  );

  dataSourceTree = new MatTreeFlatDataSource(
    this.treeControl,
    this.treeFlattener
  );

  constructor() {
    this.dataSourceTree.data = TREE_DATA;

    this.treeControl.expandAll();
  }

  hasChild = (_: number, node: FoodNode) => node.expandable;

  getSelected() {
    let result = [];
    this.dataSourceTree.data.forEach((node) => {
      result = result.concat(
        this.treeControl.getDescendants(node).filter((x) => x.selected)
      );

      console.log(node);
    });

    console.log(result);
  }
}