带有可扩展行的角度材料表,在更改选项卡时自动扩展 使用 stackBlitz 示例 [英] Angular material Table with expandable rows, automaticly expanded when change tabs With stackBlitz example
问题描述
我有一个带有可扩展行的 Angular 材料表.在每一行,我有多个标签,在第一个选项卡上,我有另一个带有可扩展行的表.开始时,所有行都折叠起来,到目前为止一切顺利.当我单击一行时,该行被扩展,到目前为止,还不错.当我更改选项卡并返回时,我的所有行都会展开.我该如何解决这个问题?HTML 代码就像 Angular 材料在其页面上描述的具有可扩展行的表格.
我针对我的问题创建了一个 StackBlitz,它是一个比我所拥有的文件更简单的文件,但它有同样的问题.
结果:
在我切换标签并返回消息标签后
我的 HTML 文件的一部分
</td></ng-容器><tr mat-header-row *matHeaderRowDef=displayedColumns"></tr>
<app-分页器[itemsPerPage]=20"[numberOfEntries]=messages?.totalCount";[currentPage]="page$ |异步"(pageChanged)="pageChange$.next($event)";></app-paginator>Typescript 文件的一部分:
expandedElement = null;
我希望有人能在这里帮助我.
解决方案 我找到了答案.显然我必须将
添加到
I have an Angular material table with expandable rows. In every row, I have multiple tabs,
On the first tab, I have another table with expandable rows. At the start al the rows are collapsed, so far so good. When I click a row, the row is expanded, again so far, so good. When I change tabs and come back, all my rows are expanded.
How can I solve this issue? The HTML code is like Angular material describes on their page for a table with expandable rows.
I created a StackBlitz with my problem, it is a less complicated file then what I'm having, but it has the same problem.
Result:
https://angular-wat7fa.stackblitz.io
Code:
https://stackblitz.com/edit/angular-wat7fa-wzk7sh?file=app/table-expandable-rows-example.html
After I switched tabs and return to the Messages tab
Part of my HTML file
<table
mat-table
[dataSource]="messages.results"
multiTemplateDataRows
class="mat-elevation-z0 messages-table"
>
<ng-container matColumnDef="enqueuedTimeUtc">
All my columns
</ng-container>
<ng-container matColumnDef="info">
<th mat-header-cell *matHeaderCellDef>Info</th>
<td mat-cell *matCellDef="let context">
<i
[appTooltip]="customerInfo"
[appTooltipContext]="context"
class="material-icons info-icon"
>info</i
>
</td>
</ng-container>
<ng-container matColumnDef="expandedDetail">
<td
mat-cell
*matCellDef="let element"
[attr.colspan]="displayedColumns.length"
class="locations-cell"
>
<div
class="example-element-detail"
[@detailExpand]="
element == expandedElement ? 'expanded' : 'collapsed'
"
>
<td-code-editor
[style.height.px]="200"
editorStyle="border:0;"
theme="vs"
[editorOptions]="editorOptions"
[(ngModel)]="element.messageBody"
>
</td-code-editor>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr
mat-row
*matRowDef="let element; columns: displayedColumns"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element"
></tr>
<tr
mat-row
class="example-detail-row"
*matRowDef="let row; columns: ['expandedDetail']"
></tr>
</table>
<app-paginator
[itemsPerPage]="20"
[numberOfEntries]="messages?.totalCount"
[currentPage]="page$ | async"
(pageChanged)="pageChange$.next($event)"
></app-paginator>
Part of the Typescript file:
expandedElement = null;
I hope somebody can help me here.
解决方案 I found my answer.
Apparentely I have to add <ng-template matTabContent></ng-template>
to the <mat-tab>
这篇关于带有可扩展行的角度材料表,在更改选项卡时自动扩展 使用 stackBlitz 示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆