Question

我是角色的新手，以下是场景：

我有一个包含10列的表格。

假设我在第4栏中有不同的状态，如儿童，青少年，年轻人，成年人，大四。

在Angular表中显示所有记录时，具有高级状态的记录我只需要显示1,2,3＆amp;带有数据和5-10列的4列将是空白的（实际上这些列的数据正在填充表单数据源，但我需要将其显示为空白）并合并。

<mat-table #table [dataSource]="ds" matSort matSortDisableClear>

<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition. -->

<!-- Request ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> 
Req Id
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="firstName">   
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">    
Name 
</mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.firstName}}<br />{{row.lastName}}  </mat-cell>
</ng-container>

<!-- address Column -->
<ng-container matColumnDef="address">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> 
address
</mat-header-cell>
<mat-cell *matCellDef="let row"> 

{{row.address}}
</mat-cell>
</ng-container>

<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> 
Status    
<mat-cell *matCellDef="let row">
{{row.status}} </mat-cell>
</ng-container>      

....
<!-- Other 6 columns that needs to be merged similar to Id name and address -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

提前致谢

Answer 1

对于每个我们需要验证已移除状态并根据该状态显示数据的列，使用这样的ng容器

合并Angular表中某些记录的单元格

1 个答案: