如何在Angular材质6表中使用colspan和ngFor？

Question

我正在使用Angular Material渲染表格。

代码：

<ng-container matColumnDef="type">
  <th mat-header-cell *matHeaderCellDef> Workout type </th>
  <td mat-cell *matCellDef="let workout"> {{workout.type}} </td>
</ng-container>

<ng-container matColumnDef="set1">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[0].weight}} x {{workoutData.workoutSessions[0].sets[0].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set2">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[1].weight}} x {{workoutData.workoutSessions[0].sets[1].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set3">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[2].weight}} x {{workoutData.workoutSessions[0].sets[2].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set4">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[3].weight}} x {{workoutData.workoutSessions[0].sets[3].repetitions}} </td>
</ng-container>

<ng-container matColumnDef="set5">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> {{workoutData.workoutSessions[0].sets[4].weight}} x {{workoutData.workoutSessions[0].sets[4].repetitions}} </td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="workoutTableColumns"></tr>
<tr mat-row *matRowDef="let row; columns: workoutTableColumns;"></tr>

我对此有2个问题：

1）在这种情况下是否可以使用* ngFor遍历数组？现在我的代码看起来太乱了，想要清理它。

2）是否可以使用colspan？我没有找到解决此问题的任何信息（问题：https://github.com/angular/material2/issues/5888）。

所以，主要的问题是：在这种特殊情况下使用Angular材质表还是常规的材质表更好？

Answer 1

我认为没有理由您无法执行以下操作：

<ng-container *ngFor="let set of workoutData.workoutSessions[0].sets; let i = index" [matColumnDef]="'set' + i">
  <th mat-header-cell *matHeaderCellDef> Weight x Reps </th>
  <td mat-cell *matCellDef="let set"> {{set.weight}} x {{set.repetitions}} </td>
</ng-container>

其中大多数是不言自明的，主要更改是将matColumnDef="setX"更改为[matColumnDef]="'set' + i"。通过添加方括号，它将使该值被评估为字符串，而不仅仅是“按原样”读取。

Answer 2

我知道这是个老问题，但是对于您的第二个问题，是的，您可以在matTable中使用colspan。这是mat-h​​eader-cell的示例代码：-

<ng-container matColumnDef="set5">
  <th mat-header-cell *matHeaderCellDef colspan="3"> Weight x Reps </th>
  <td mat-cell *matCellDef="let workoutData"> 
  {{workoutData.workoutSessions[0].sets[4].weight}} x 
 {{workoutData.workoutSessions[0].sets[4].repetitions}} </td>
</ng-container>

Answer 3

我不喜欢接受的答案，因为它建议一些解决方法。实际上，colspan是attr。因此您可以像[attr.colspan]一样使用[attr.colspan]="columns.length"添加colspan