Angular 角度材质：如何在材质表中创建多行列

我正在写一个材料表，如下所示：

<mat-table multiTemplateDataRows [dataSource]="dataSource">
  <h4>TEST</h4>

  <ng-container matColumnDef="Title">
    <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Title: </h4>
      <p>{{element.title || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Time">
    <mat-header-cell *matHeaderCellDef> Time </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Time: </h4>
      <p>{{element.time || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Created By">
    <mat-header-cell *matHeaderCellDef> Created By </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Created By: </h4>
      <p>{{element.createdBy || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Output">
    <mat-header-cell *matHeaderCellDef> Output </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Output: </h4>
      <p>{{element.output || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <h4>Description: </h4>
      <p>{{element.description || 'None'}}</p>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="Divider">
    <mat-header-cell *matHeaderCellDef> Divider </mat-header-cell>
    <mat-cell *matCellDef="let element" (click)="onEditActivityTemplate(element); $event.stopPropagation();">
      <mat-divider></mat-divider>
    </mat-cell>
  </ng-container>

  <mat-row *matRowDef="let row; columns: ['Title', 'Time'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Created By', 'Output'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Description'];"></mat-row>
  <mat-row *matRowDef="let row; columns: ['Divider'];"></mat-row>

</mat-table>

---

这回答了你的问题吗？你能发布一些关于你的数据结构的描述吗？此外，如果您使用flex（这是您正在使用的，与之相反），您将无法按照角度材质表文档的最后一句使用colspan/rowspan：我用数据结构更新了问题这是否回答了您的问题？你能发布一些关于你的数据结构的描述吗？此外，如果您使用flex（这是您正在使用的，与之相反），您将无法按照角度材质表文档的最后一句使用colspan/rowspan：我用数据结构更新了问题

export interface MaterialImage {
  id: number;
  url: string;
  title: string;
  description: string;
  timestamp: string;
  createdBy: string;
  output: string;
}