如何在 Angular 材料 6 表中使用 colspan 和 ngFor? [英] How to use colspan and ngFor in Angular material 6 table?
问题描述
我正在使用 Angular Material 来渲染表格.
I'm using Angular Material to render the table.
代码:
<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>
我有两个问题:
1) 在这种情况下,是否可以使用 *ngFor 遍历数组?现在我的代码看起来太乱了,想清理它.
1) Is it possible to iterate thru an array using *ngFor in this situation? Now my code looks too messy, want to clean it.
2) 是否可以使用 colspan?我没有找到任何解决此问题的信息(问题:https://github.com/angular/material2/issues/5888).
2) Is it possible to use colspan? I didn't find any information that this issue is solved (issue: https://github.com/angular/material2/issues/5888 ).
所以,主要问题是:在这种特殊情况下,使用 Angular 材质表还是常规材质表更好?
So, the main quesion is: Is it better to use Angular material table or regular one in this particular situation?
推荐答案
我认为您没有理由不能执行以下操作:
I see no reason why you couldn't do the following:
<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"
.通过添加方括号,它会使值被评估为字符串,而不仅仅是按原样"读取.
Most of it is self explanatory, the main change is to change matColumnDef="setX"
to be [matColumnDef]="'set' + i"
. By adding the square brackets, it causes the value to get evaluated to a string rather than just read 'as is'.
这篇关于如何在 Angular 材料 6 表中使用 colspan 和 ngFor?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!