1

我有 2 个 mat-tabs，每个都有一个表，具有相同的数据布局，只是不同的数据源。

<mat-tab-group>
  <mat-tab label="table 1">        
    <table mat-table [dataSource]="dataSource1">       <-- one data source
      <ng-container matColumnDef="col1">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let val"> some Data </td>
      </ng-container>

      <ng-container matColumnDef="col2">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let val"> some Data </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
    </table>
  </mat-tab>
  <mat-tab label="table 2">        
    <table mat-table [dataSource]="dataSource2">       <-- another data source
      <ng-container matColumnDef="col1">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let val"> some Data </td>
      </ng-container>

      <ng-container matColumnDef="col2">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let val"> some Data </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
    </table>
  </mat-tab>
</mat-tab-group>

如您所见，行和列完全相同，所以我想重用表格模板，如下所示：

<table mat-table [dataSource]="dataSource2">
  <ng-container *ngTemplateOutlet="tableContent"></ng-container>
</table>

...

<ng-template #tableContent>
 <ng-container matColumnDef="col1">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let val"> some Data </td>
  </ng-container>

  <ng-container matColumnDef="col2">
    <th mat-header-cell *matHeaderCellDef></th>
    <td mat-cell *matCellDef="let val"> some Data </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['col1', 'col2']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['col1', 'col2'];"></tr>
</ng-template>

有了这个，我得到：

错误：缺少页眉、页脚和行的定义；无法确定应呈现哪些列。

如何定义一次模板？

4

1 回答 1

1

您为什么不创建一个MyTableComponent并仅接收您的数据作为输入？

你最终的 HTML 应该是这样的：

<mat-tab-group>
  <mat-tab label="table 1">        
    <my-table [data]="dataSource1"></my-table>
  </mat-tab>
  <mat-tab label="table 2">        
    <my-table [data]="dataSource2"></my-table>
  </mat-tab>
</mat-tab-group>

任何一个

如果您坚持使用该ngTemplateOutlet解决方案，如果您在模板中添加 table 标记并在 templateOutlet 中传递数据，它可能会起作用（阅读：如何使用 NgTemplateOutlet并搜索Passing data to ngTemplateOutlet）

于 2021-05-13T14:34:48.023 回答