Question

我正在这样编写材料表：

<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>

我某种程度上需要能够显示与这样布置的这些行相关联的图像

Vision API

所以我有2个问题。 1这可能吗？ 2我该如何处理？同样，如果可能的话，我想在每个数据集的下方插入一个mat-divider，但是我也没有成功。

我的数据是以下对象的数组：

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

角材料：如何在材料表中制作多行列

0 个答案: