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

Я использую 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 angular6 angular-material-6
person alexfrize    schedule 26.06.2018    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

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

person Simon K    schedule 26.06.2018
comment
а как насчет колспана? - person Pradeep; 02.02.2019
comment
Вы не можете использовать colspan с MatTable. Если вы хотите его использовать, вам нужно использовать CdkTable Материала, а не MatTable, который представляет собой совершенно другой способ написания таблицы. Это дает вам собственную таблицу, и вы можете использовать colspan, как обычно. См. Следующую ссылку: material.angular.io/cdk/table/overview - person Simon K; 04.02.2019
comment
@Simon K не согласен, причина в angular attrs! - person Andris; 19.07.2019
comment
@Andris colspan, конечно, можно установить как любой старый атрибут, но это не повлияет на MatTable, поскольку MatTable не смотрит на этот атрибут. - person Simon K; 23.07.2019

arrow_upward
3
arrow_downward

Мне не нравится принятый ответ, потому что он предлагает обходной путь. На самом деле 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>
person Andris    schedule 19.07.2019
comment
не могли бы вы привести какой-нибудь пример? - person johannesMatevosyan; 01.08.2019
comment
Я добавил пример. Но писать особо нечего, это просто attr. - person Andris; 01.08.2019

arrow_upward
0
arrow_downward

Я знаю, что это старый вопрос, хотя для вашего второго вопроса да, вы можете использовать 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>
person Bikash Mondal    schedule 25.06.2019