如何在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>

我对此有2个问题：

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屋！