使用MAT-Table在动态表上的特定列上应用Colspan

Question

我有 Mat-table 在其中动态创建列 我想使用 [attr.colspan] 添加扩展列功能 如果在列标题上检测到单击事件，则将atter应用于该特定列上，

将其插入HTML模板将更改应用于第一列，

 <ng-container
matColumnDef="{{ column }}"
*ngFor="let column of displayedColumns">
<th mat-header-cell *matHeaderCellDef (click)="headerEvent(column)">{{ column }}</th>
<td mat-cell *matCellDef="let element"
[attr.colspan]="1"
>{{ element[column] }}</td>
</ng-container>

如何动态应用 [attr.colspan] ？

Answer 1

是的，您可以使用任何表达式，例如

<th mat-header-cell *matHeaderCellDef (click)="headerEvent(column)">
  {{ column }}
</th>
<ng-container mat-cell *matCellDef="let element">
  <td
    *ngIf="!element.colspan || column != 'name'"
    [attr.colspan]="column == 'position'?element.colspan:null"
  >
    {{ element[column] }}
  </td>
</ng-container>

，您有一些数据喜欢

 [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He',colspan:2}
 ]

查看您的分叉stackblitz

请参阅制作colspan时，您会“删除”下一个TD