angular - Mat-Table 内的 Mat-Table 显示每条记录的额外行收件箱 x
问题描述
我在 Mat-Table 中实现了 Mat-Table。显示的数据是正确的。但是,对于父行的每一行,它会在 Mat-Table 中显示一个额外的空行。由于我无法追踪错误,我在这个论坛上寻求帮助。请帮忙。
HTML 代码如下。
<div class="mat-elevation-z8">
<table mat-table [dataSource]="listData" class="mat-elevation-z8" matSort multiTemplateDataRows width="100%">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Tax Code Column -->
<ng-container matColumnDef="taxCode">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Code </th>
<td mat-cell *matCellDef="let element" align="left"> {{element.taxCode}} </td>
</ng-container>
<!-- Tax Name Column -->
<ng-container matColumnDef="taxDescription">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element" align="left"> {{element.taxDescription}} </td>
</ng-container>
<!-- Tax Type Code Column -->
<ng-container matColumnDef="taxTypeCode">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Tax Type Code </th>
<td mat-cell *matCellDef="let element" align="left"> {{element.taxTypeCode}} </td>
</ng-container>
<!-- Edit Column -->
<ng-container matColumnDef="edit">
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<a mat-button matTooltip="Edit" [routerLink]="['/tax/edit', row.taxCode]" *ngIf="isUserAuthenticated"><mat-icon>create</mat-icon></a>
</td>
</ng-container>
<!-- Delete Column -->
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef>
</th>
<td mat-cell *matCellDef="let row">
<button mat-button matTooltip="Delete" color="warn" (click)="onDelete(row.taxCode)" *ngIf="isUserAuthenticated"><mat-icon>clear</mat-icon></button>
</td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="element.taxVersion.length > 0">
<table mat-table [dataSource]="element.taxVersion" class="mat-elevation-z8" width="100%">
<ng-container matColumnDef="taxID">
<th mat-header-cell *matHeaderCellDef> Tax ID </th>
<td mat-cell *matCellDef="let elem"> {{elem.taxID}} </td>
</ng-container>
<ng-container matColumnDef="versionCode">
<th mat-header-cell *matHeaderCellDef> Version Code </th>
<td mat-cell *matCellDef="let elem"> {{elem.versionCode}} </td>
</ng-container>
<ng-container matColumnDef="versionDate">
<th mat-header-cell *matHeaderCellDef> Version Date </th>
<td mat-cell *matCellDef="let elem"> {{elem.versionDate}} </td>
</ng-container>
<ng-container matColumnDef="taxRate">
<th mat-header-cell *matHeaderCellDef> Tax Rate </th>
<td mat-cell *matCellDef="let elem"> {{elem.taxRate}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumnsVersion"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumnsVersion;"></tr>
</table>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === row"
(click)="expandedElement = row"
>
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<mat-paginator [pageSizeOptions]="[7, 15, 20]" showFirstLastButtons></mat-paginator>
</div>
解决方案
在另一个 mat-table 中使用 mat-table 有一个不幸的副作用。Mat-table 将呈现其范围内的所有 mat-rows,包括内部表中的那些。您可以为您的<tr mat-row *matRowDef="let row; columns: displayedColumnsVersion;"></tr>
行添加一个额外的类class='inner-table-row'
并检查额外的行以查看这是否是问题所在。解决此问题的最佳选择是将内部表格移动到另一个组件中,并使用选择器将其呈现在外部表格中。
推荐阅读
- android - 有没有办法让 Room 在没有 AUTOINCREMENT 的情况下生成自动生成的主键?
- javascript - 点击功能内的Jasmin单元测试代码
- python - 使用 Pyspark 将密集向量转换为数据框
- arrays - 从另一个类中读取数组
- node.js - Azure CosmosDB with MongoDB API:如何避免请求率大的错误
- swift - 将 Swift 3 函数转换为 Swift 4
- python - 将两个 pyspark 数据帧相乘
- javascript - 如何从 React 组件调用外部函数
- vba - Excel VBA - 将特定工作簿中的所有工作表复制到活动工作簿中
- javascript - Firebase 登录 Facebook / Google - UID