Как использовать colspan и ngFor в угловом материале 6 таблицы?

Question

Я использую угловой материал для рендеринга таблицы.

Код:

<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) Можно ли использовать кольспан?Я не нашел никакой информации, что эта проблема решена (проблема: https://github.com/angular/material2/issues/5888).

Итак, основной вопрос: лучше ли использовать таблицу угловых материалов или обычную в этой конкретной ситуации?

Answer 1

Я знаю, что это старый вопрос, хотя для вашего второго вопроса, да, вы можете использовать colspan в matTable.Вот пример кода для 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>

Answer 2

Мне не нравится принятый ответ, потому что он предлагает какой-то обходной путь.На самом деле colspan это attr.Таким образом, вы можете добавить colspan, используя [attr.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>

Answer 3

Я не вижу причин, по которым вы не могли бы сделать следующее:

<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".Добавление квадратных скобок приводит к тому, что значение оценивается как строка, а не просто читается «как есть».