我可以在 mat-expanded 行内显示另一个表格吗? [英] Can I display another table inside mat-expanded row?
问题描述
我有一个带有扩展行的 mat-table.如果我单击一行，它会展开并显示一个硬编码的字符串.我想在展开的行内显示另一个表格.是否可以?或者，是否有任何其他技术或方法可以实现我正在尝试做的事情.我正在尝试显示给定时间段内已执行作业的列表.在主行上，我只想显示类似 01-01-2017 到 01-05-2017 的时间段，当用户单击该行时，它将展开并显示包含其他详细信息(如日期、时间、用户)的作业列表，状态等.将显示
HTML 代码:-
<!-- Id 列--><ng-container matColumnDef="position"><mat-header-cell *matHeaderCellDef>序列号</mat-header-cell><mat-cell *matCellDef="let element; let i = index">{{ i + 1 }}</mat-cell></ng-容器><!-- 执行日期栏--><ng-container matColumnDef="executionDate"><mat-header-cell *matHeaderCellDef>执行日期</mat-header-cell><mat-cell *matCellDef="let 元素">{{ element.executionDate |日期:'yyyy-MM-dd' }}</mat-cell></ng-容器><!-- 时间段后列--><ng-container matColumnDef="afterTimePeriod"><mat-header-cell *matHeaderCellDef>当前时间段</mat-header-cell><mat-cell *matCellDef="let 元素">{{ element.afterTimePeriod }}</mat-cell></ng-容器><!-- 上一时间段列--><ng-container matColumnDef="previousTimePeriod"><mat-header-cell *matHeaderCellDef>上一时间段</mat-header-cell><mat-cell *matCellDef="let 元素">{{ element.previousTimePeriod }}</mat-cell></ng-容器><!-- 状态栏--><ng-container matColumnDef="status"><mat-header-cell *matHeaderCellDef>状态 </mat-header-cell><mat-cell *matCellDef="let 元素">{{ element.status }}</mat-cell></ng-容器><!-- 停止和重新运行按钮的代码--><ng-container matColumnDef="actions"><mat-header-cell *matHeaderCellDef></mat-header-cell><mat-cell *matCellDef="let element; let index = index"><按钮*ngIf="索引 === 0"垫图标按钮(点击)="stop_exec_job(元素)"matTooltip="停止执行作业"[已禁用]="element.status == '成功' ||element.status == '完成' ||element.status == '取消'"><!-- 编辑行图标--><i class="material-icons" style="color:red">停止<!-- 删除行的图标--><按钮*ngIf="索引 === 0"垫图标按钮(点击)="re_run_job(元素)"matTooltip="重新运行作业"[已禁用]="element.status == 'RUNNING' ||element.status == '待定'"><i class="material-icons" style="color:green">缓存</i></mat-cell></ng-容器><!-- Spinner 代码--><ng-container matColumnDef="spinner"><mat-header-cell *matHeaderCellDef></mat-header-cell><mat-cell *matCellDef="let element"><ng-template #doNotShowSpinner></ng-模板></mat-cell></ng-容器><!-- 扩展内容列- 详细信息行由这一列组成--><ng-container matColumnDef="expandedDetail"><mat-cell *matCellDef="let detail">示例文本</mat-cell></ng-容器><mat-header-row*matHeaderRowDef="jobExecStatDisplayedColumns"></mat-header-row>
是的，你可以，看看这个堆叠闪电战.
只需像往常一样添加另一个 mat-table，包括数据源、列定义等.
需要注意的重要一点是，您需要确保展开行中的表格跨越所有列(除非您不想这样做).将明细行的 attr.colspan 属性设置为你想要跨越的列数，通常你可以只取你的 displayedColumns 的 length> 数组跨越所有列.
I have a mat-table with an expanded row. If I click on a row it expands and displays a hardcoded string. I would like to display another table inside the expanded row. Is it possible? Alternatively, is there any other technique or method to achieve what I am trying to do. I am trying to display List of executed Jobs for a given time period. On main row, I want to show only time period something like 01-01-2017 TO 01-05-2017 and when a user clicks on that row it will expand and display a list of jobs with other details like date, time, user, status etc.. will be displayed
Code for HTML :-
<mat-table [dataSource]="jobExecutionStat">
<!-- Id Column -->
<ng-container matColumnDef="position">
<mat-header-cell *matHeaderCellDef>
Serial Number
</mat-header-cell>
<mat-cell *matCellDef="let element; let i = index"
>{{ i + 1 }}
</mat-cell>
</ng-container>
<!-- Execution Date Column -->
<ng-container matColumnDef="executionDate">
<mat-header-cell *matHeaderCellDef>
Execution Date
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.executionDate | date: 'yyyy-MM-dd' }}
</mat-cell>
</ng-container>
<!-- After Time Period Column -->
<ng-container matColumnDef="afterTimePeriod">
<mat-header-cell *matHeaderCellDef>
Current Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.afterTimePeriod }}
</mat-cell>
</ng-container>
<!-- Previous Time Period Column -->
<ng-container matColumnDef="previousTimePeriod">
<mat-header-cell *matHeaderCellDef>
Previous Time Period
</mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.previousTimePeriod }}
</mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef> Status </mat-header-cell>
<mat-cell *matCellDef="let element"
>{{ element.status }}
</mat-cell>
</ng-container>
<!-- Code for Stop and Re-Run Buttons -->
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element; let index = index">
<button
*ngIf="index === 0"
mat-icon-button
(click)="stop_exec_job(element)"
matTooltip="Stop Executing the Job"
[disabled]="
element.status == 'SUCCESS' ||
element.status == 'FINISH' ||
element.status == 'CANCELLED'
"
>
<!-- Edit icon for row -->
<i class="material-icons" style="color:red"> stop </i>
</button>
<!-- Delete icon for row -->
<button
*ngIf="index === 0"
mat-icon-button
(click)="re_run_job(element)"
matTooltip="Re-Run the Job"
[disabled]="
element.status == 'RUNNING' ||
element.status == 'Pending'
"
>
<i class="material-icons" style="color:green">
cached
</i>
</button>
</mat-cell>
</ng-container>
<!-- Code for Spinner -->
<ng-container matColumnDef="spinner">
<mat-header-cell *matHeaderCellDef> </mat-header-cell>
<mat-cell *matCellDef="let element">
<div
*ngIf="
element.status == 'Running';
else doNotShowSpinner
"
>
<mat-spinner
mode="indeterminate"
[diameter]="20"
></mat-spinner>
</div>
<ng-template #doNotShowSpinner> </ng-template>
</mat-cell>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column -->
<ng-container matColumnDef="expandedDetail">
<mat-cell *matCellDef="let detail">
Sample Text
</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="jobExecStatDisplayedColumns"
></mat-header-row>
<mat-row
*matRowDef="let row; columns: jobExecStatDisplayedColumns"
matRipple
class="element-row"
[class.expanded]="expandedElement == row"
(click)="
expandedElement === row
? (expandedElement = null)
: (expandedElement = row)
"
>
</mat-row>
<mat-row
*matRowDef="
let row;
columns: ['expandedDetail'];
when: isExpansionDetailRow
"
[@detailExpand]="
row.element == expandedElement ? 'expanded' : 'collapsed'
"
style="overflow: hidden"
>
</mat-row>
</mat-table>
Yes you can, check out this stackblitz.
Just add another mat-table like you normally would, including a datasource, column definitions etc.
On important thing to note is that you need to make sure your table in the expanded row spans all columns (unless you don't want it to). Set the attr.colspan attribute of the detail row to the number of columns you want to span, usually you can just take the length of your displayedColumns array to span all columns.
这篇关于我可以在 mat-expanded 行内显示另一个表格吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
