如何在 Angular 材料 6 表中使用 colspan 和 ngFor？答案

【问题标题】：How to use colspan and ngFor in Angular material 6 table?如何在 Angular 材料 6 表中使用 colspan 和 ngFor？
【发布时间】：2018-06-26 04:52:39
【问题描述】：

我正在使用 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 材质表还是常规材质表更好？

【问题讨论】：

标签： angular angular6 angular-material-6

【解决方案1】：

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

    <ng-container matColumnDef="demo">
        <th mat-header-cell *matHeaderCellDef></th>
        <td mat-cell *matCellDef="let item" [attr.colspan]="columns.length - 1">...</td>
    </ng-container>

【讨论】：

你能举个例子吗？
我添加了示例。但是没什么好写的，因为只是attr。

【解决方案2】：

我认为您没有理由不能执行以下操作：

<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"。通过添加方括号，它会导致值被评估为字符串，而不是仅仅读取“原样”。

【讨论】：

colspan 怎么样？
您不能将colspan 与MatTable 一起使用。如果你想使用它，那么你需要使用 Material 的 CdkTable 而不是 MatTable，这是一种完全不同的表格编写方式。这为您提供了一个本机表，您可以像往常一样使用 colspan。请参阅以下链接：material.angular.io/cdk/table/overview
@Simon K 不同意，原因是角度属性！
@Andris colspan 可以像任何旧属性一样设置，当然，但它不会对MatTable 产生任何影响，因为MatTable 不会查看该属性。跨度>

【解决方案3】：

我知道这是一个老问题，但对于您的第二个问题，是的，您可以在 matTable 中使用 colspan。这是 mat-header-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>

【讨论】：