如何解决可重复使用的 angular 11 模板
我有 2 个 mat-tab,每个都有一个表格,具有相同的数据布局,只是数据源不同。
<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>
</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>
我得到:
错误:缺少页眉、页脚和行的定义;不能 确定应呈现哪些列。
如何定义模板一次?
解决方法
为什么不创建一个 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 中(阅读:How to Use NgTemplateOutlet 并搜索 {{1} })
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。