Mat-table 的行具有不同的子行数

尝试使用mat-table指令，例如*matRowDef and multiTemplateDataRows构建一个表，其中每行可以有不同数量的子行。

示例界面如下所示：

interface ReportCard {
  student: string;
  reports: Report[];
}

interface Report {
  class: string;
  teacher: string;
  grade: string;
}

...没有固定数量的报告。

我可以轻松地构建一个表*ngFor，但我想使用内置的材质表指令。

<table>
  <thead>
    <tr>
      <th>student</th>
      <th colspan="3">
        classes
      </th>
    </tr>
    <tr>
      <th></th>
      <th>name</th>
      <th>teacher</th>
      <th>grade</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let reportCard of reportCards">
      <tr
        *ngFor="let report of reportCard.reports; let first = first"
      >
        <td
          *ngIf="first"
          [attr.rowspan]="reportCard.reports.length"
        >
          {{ reportCard.student }}
        </td>
        <td>{{ report.class }}</td>
        <td>{{ report.teacher }}</td>
        <td>{{ report.grade }}</td>
      </tr>
    </ng-container>
  </tbody>
</table>

我想我还可以使用以下命令为数据行创建任意数量的模板multiTemplateDataRows处理每个报告（类似于这个答案 https://stackoverflow.com/a/74673290/2088345），但这似乎不是最好的解决方案。另外，我不确定在尝试填充时是否能够访问每个报告的正确索引<td>具有正确数据的单元格。

我正在尝试构建的表的 Stackblitz https://stackblitz.com/edit/angular-ibcmee?file=src%2Fapp%2Ftable-basic-example.html,src%2Fapp%2Ftable-basic-example.ts,src%2Fapp%2Ftable-basic-example.css

任何帮助表示赞赏。

我建议在将数据用作数据源之前，将数据转换为包含报告卡及其报告的平面数组。对于您的具体情况，这将是最简单且最容易理解的。

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
  
  private reportCards = REPORT_DATA;
  
  public reportCardColumns: string[] = ['reportCard.student'];
  public reportColumns: string[] = ['report.class', 'report.grade', 'report.teacher'];
  public dataSource: Array<ReportCard|Report>;
  

  public ngOnInit(): void {
    const data: Array<ReportCard|Report> = [];
    for (let reportCard of REPORT_DATA) {
      data.push(reportCard, ...reportCard.reports);
    }
    this.dataSource = data; 
  }

  public isReportCard(index: number, data: ReportCard|Report): boolean {
    return Reflect.has(data, 'reports');
  }
  
  public isReport(index: number, data: ReportCard|Report): boolean {
    return !Reflect.has(data, 'reports');
  }
}

在您的模板中，您现在可以简单地使用两个 when 谓词及其自己的列和 css 类：

<tr mat-header-row *matHeaderRowDef="reportColumns" ></tr>
<tr mat-row *matRowDef="let row; columns: reportCardColumns; when: isReportCard" class="reportCard"></tr>
<tr mat-row *matRowDef="let row; columns: reportColumns; when: isReport" class="report"></tr>

你可以找到这里有一个正在运行的 StackBlitz https://stackblitz.com/edit/angular-ibcmee-u3wxjp?file=src/app/table-basic-example.ts.

Update:

补充意见后这是另一个 Stackblitz https://stackblitz.com/edit/angular-ibcmee-3a2oux?file=src/app/table-basic-example.ts这正是原始问题中所要求的。