Angular Строка материала при циклическом просмотре данных

Question

Мой источник данных похож на ниже

[{"isGroup":true,"groupName":"MV Reddy","items":[{"id":1,"name":"MV Reddy","verticalid":5,"vertical":"Colocation - Large > 20 Racks","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2019},{"id":10,"name":"MV Reddy","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020}]},{"isGroup":true,"groupName":"Neeraj Jha","items":[{"id":2,"name":"Neeraj Jha","verticalid":4,"vertical":"Alliances","target":"70","sap":"20","colo":"30","others":"20","quarter":2,"year":2019},{"id":5,"name":"Neeraj Jha","verticalid":4,"vertical":"Alliances","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2019}]},{"isGroup":false,"groupName":"Suresh Rathod","items":[{"id":3,"name":"Suresh Rathod","verticalid":3,"vertical":"C4C India (Public Cloud)","target":"100","sap":"20","colo":"30","others":"50","quarter":1,"year":2019}]},{"isGroup":false,"groupName":"Arun Dubey","items":[{"id":4,"name":"Arun Dubey","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":4,"year":2019}]},{"isGroup":true,"groupName":"Atin Singh","items":[{"id":6,"name":"Atin Singh","verticalid":5,"vertical":"Colocation - Large > 20 Racks","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":7,"name":"Atin Singh","verticalid":2,"vertical":"IAAS and Rest of Ctrls Services","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":8,"name":"Atin Singh","verticalid":3,"vertical":"C4C India (Public Cloud)","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020},{"id":9,"name":"Atin Singh","verticalid":6,"vertical":"Govt","target":"150","sap":"80","colo":"20","others":"50","quarter":1,"year":2020}]}]

, и я написал / распечатал свою таблицу следующим образом:

<table class="mat-elevation-z8 " mat-table matSort [dataSource]='targetData' (matSortChange)="sortData($event)">
    <ng-container matColumnDef="Employee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee </th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].name}}
        </td>
    </ng-container>

    <ng-container matColumnDef="groupData">

        <ng-container *matCellDef="let group">
            <ng-container *ngFor="let groupCol of group.items;index as i;">
                <ng-container *ngIf="i==0 else newRow;">
                    <td mat-cell rowspan="group.items.length">
                        {{group.groupName}}
                    </td>
                    <td mat-cell>
                        {{groupCol.vertical}}
                    </td>
                    <td mat-cell>
                        {{groupCol.target}}
                    </td>
                    <td mat-cell>
                        {{groupCol.sap}}
                    </td>
                    <td mat-cell>
                        {{groupCol.colo}}
                    </td>
                    <td mat-cell>
                        {{groupCol.others}}
                    </td>
                </ng-container>
                <ng-template #newRow>
                    <tr mat-row>
                        <td mat-cell>
                            {{groupCol.vertical}}
                        </td>
                        <td mat-cell>
                            {{groupCol.target}}
                        </td>
                        <td mat-cell>
                            {{groupCol.sap}}
                        </td>
                        <td mat-cell>
                            {{groupCol.colo}}
                        </td>
                        <td mat-cell>
                            {{groupCol.others}}
                        </td>
                    </tr>
                </ng-template>

            </ng-container>
        </ng-container>

    </ng-container>

    <ng-container matColumnDef="Vertical">
        <th mat-header-cell *matHeaderCellDef>Vertical</th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].vertical}} </td>
    </ng-container>
    <ng-container matColumnDef="Target">
        <th mat-header-cell *matHeaderCellDef>Target</th>
        <td mat-cell *matCellDef="let element"> {{element.items[0].target}} </td>
    </ng-container>
    <ng-container matColumnDef="SAP">
        <th mat-header-cell *matHeaderCellDef>SAP</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].sap}}</td>
    </ng-container>
    <ng-container matColumnDef="COLO">
        <th mat-header-cell *matHeaderCellDef>COLO</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].colo}}</td>
    </ng-container>
    <ng-container matColumnDef="Others">
        <th mat-header-cell *matHeaderCellDef>Others</th>
        <td mat-cell *matCellDef="let element">{{element.items[0].others}}</td>
    </ng-container>
    <ng-container matColumnDef="Action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
        <td mat-cell *matCellDef="let element">
            <div class="tableActions ">

                <button class="view mat-button" (click)='edit(element.items[0])'>
                    <i class="material-icons">
                        create
                    </i>
                </button>
            </div>
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="TargetTable;"></tr>
    <tr mat-row *matRowDef="let row; columns: TargetTable;"></tr>
    <tr mat-row *matRowDef="let row; columns: ['groupData']; when: isAGroup"></tr>
</table>

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

Окончательный результат должен быть таким, как показано ниже.

Answer 1

Ваш подход идет в правильном направлении, так как вы используете атрибут rowspan. Шаблон, однако, является ненужным сложным и может быть упрощен, если вы предварительно обработаете свои данные.

Я решил аналогичную проблему в проекте с открытым исходным кодом Koia с использованием класса RowSpanComputer . В summary-table.component. html вычисленные диапазоны строк затем используются для определения атрибута rowspan элемента td.

[attr.rowspan]="rowSpans[iCol][iRow].span"

RowSpanComputer класс вычисляет rowspan для каждой ячейки из указанных данных таблицы (массив строк). Он в основном перебирает строки и увеличивает rowspan для ячеек, пока их значение остается неизменным, а расположенные слева ячейки также охватываются. Как только значение изменяется, соответствующий rowspan сбрасывается в ноль.

Пожалуйста, посмотрите на следующее StackBlitz , которое использует предоставленные вами данные. Это, очевидно, должно быть дополнительно уточнено, чтобы получить ожидаемый результат.

ОБНОВЛЕНИЕ

Если вы хотите, чтобы rowspan применялось к ячейкам, даже если они расположены слева. не были объединены, просто удалите следующую строку из класса RowSpanComputer.

spanColumnContexts.slice(iCol + 1).forEach(c => c.spannedRow = {}); 

Я сделал это в этом StackBlitz , где переименован RowSpanComputer в GroupingRowSpanComputer во избежание путаницы.

Answer 2

Моя таблица:

<table mat-table matSort [dataSource]="targetData" class="mat-elevation-z8">

    <ng-container matColumnDef="Employee">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Employee </th>
        <td mat-cell *matCellDef="let element" [attr.rowspan]="rowSpanLength(element)"
            [style.display]="rowSpanLength(element)>0 ? ''  : 'none'">
            {{element.name}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Vertical">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Vertical </th>
        <td mat-cell *matCellDef="let element"> {{element.vertical}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Target">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Target </th>
        <td mat-cell *matCellDef="let element"> {{element.target}}
        </td>
    </ng-container>
    <ng-container matColumnDef="SAP">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> SAP </th>
        <td mat-cell *matCellDef="let element"> {{element.sap}}
        </td>
    </ng-container>
    <ng-container matColumnDef="COLO">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> COLO </th>
        <td mat-cell *matCellDef="let element"> {{element.colo}}
        </td>
    </ng-container>
    <ng-container matColumnDef="Others">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Others</th>
        <td mat-cell *matCellDef="let element"> {{element.others}}
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="TargetTableColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: TargetTableColumns"></tr>
</table>

И моя rowSpanLength , как показано ниже:

rowSpanLength(item) {
    let nameArr = this.targetData.filter(i => i.name === item.name);
    //return length if the item is first element in above array else 0
    return nameArr[0].id === item.id ? nameArr.length : 0;
}

Эта функция сохранит rowSpan, если item / tr является первым из группы, для остальных элементов имя td будет скрыто.

Результат, как показано ниже, это то, что я хотел. получил эту идею от @uminder ({ ссылка }) stackblitz