Question

我有一个详细的垫子表，带有扩展的行。我想根据执行日期对行进行分组。我指的是这个Stackblitz，他们已经按照字母顺序对数据进行了分组。

我不明白的主要事情是我应该将我引用的stackblitz中的组头代码放在哪里。

就我而言，我有详细的mat-table，我无法理解将代码放置在何处以及如何基于执行日期对列进行分组。有人可以帮我弄清楚如何在明细表中进行分组。

HTML代码：-

<div class="main-content">
<div class="card">
    <div class="card-header">
        <h5 class="title">Job Execution Stats</h5>
    </div>

    <div class="table-filter">
        <mat-form-field>
            <span matSuffix> <i class="material-icons">search</i> </span>

            <input
                type="search"
                matInput
                (keyup)="applyFilter($event.target.value)"
                placeholder="Filter"
            />
        </mat-form-field>
    </div>
    <div class="table-filter">
        <mat-form-field>
            <mat-select placeholder="Select Current Time Period">
                <mat-option *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        &nbsp; &nbsp;
        <mat-form-field>
            <mat-select placeholder="Select Previos Time Period">
                <mat-option *ngFor="let food of foods" [value]="food.value">
                    {{ food.viewValue }}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
    <table
        mat-table
        [dataSource]="jobExecutionList"
        multiTemplateDataRows
        class="mat-elevation-z8"
    >
        <ng-container
            matColumnDef="{{ column }}"
            *ngFor="let column of columnsToDisplay"
        >
            <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
            <td mat-cell *matCellDef="let element">
                {{ element[column] }}
            </td>
        </ng-container>

        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="1">
                <div
                    class="example-element-detail"
                    [@detailExpand]="
                        element == expandedElement
                            ? 'expanded'
                            : 'collapsed'
                    "
                >
                    <table mat-table [dataSource]="jobExecutionList">
                        <!-- Position Column -->
                        <ng-container matColumnDef="id">
                            <th mat-header-cell *matHeaderCellDef>ID</th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.id }}
                            </td>
                        </ng-container>

                        <!-- Name Column -->
                        <ng-container matColumnDef="executionDate">
                            <th mat-header-cell *matHeaderCellDef>
                                Execution Date
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{
                                    element2.executionDate
                                        | date: 'yyyy-MM-dd'
                                }}
                            </td>
                        </ng-container>
                        <!-- Name Column -->
                        <ng-container matColumnDef="lable">
                            <th mat-header-cell *matHeaderCellDef>
                                Label
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.lable }}
                            </td>
                        </ng-container>

                        <!-- Weight Column -->
                        <ng-container matColumnDef="previousTimePeriod">
                            <th mat-header-cell *matHeaderCellDef>
                                Previous Time Period
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.previousTimePeriod }}
                            </td>
                        </ng-container>

                        <!-- Symbol Column -->
                        <ng-container matColumnDef="afterTimePeriod">
                            <th mat-header-cell *matHeaderCellDef>
                                After Time Period
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.afterTimePeriod }}
                            </td>
                        </ng-container>

                        <!-- Symbol Column -->
                        <ng-container matColumnDef="status">
                            <th mat-header-cell *matHeaderCellDef>
                                Status
                            </th>
                            <td mat-cell *matCellDef="let element2">
                                {{ element2.status }}
                            </td>
                        </ng-container>

                        <tr
                            mat-header-row
                            *matHeaderRowDef="
                                columnsToDisplay2;
                                sticky: true
                            "
                        ></tr>
                        <tr
                            mat-row
                            *matRowDef="
                                let row2;
                                columns: columnsToDisplay2
                            "
                        ></tr>
                    </table>
                </div>
            </td>
        </ng-container>

        <tr
            mat-header-row
            *matHeaderRowDef="columnsToDisplay; sticky: true"
        ></tr>
        <tr
            mat-row
            *matRowDef="let element; columns: columnsToDisplay"
            class="example-element-row"
            [class.example-expanded-row]="expandedElement === element"
            (click)="
                expandedElement =
                    expandedElement === element ? null : element
            "
        ></tr>
        <tr
            mat-row
            *matRowDef="let row; columns: ['expandedDetail']"
            class="example-detail-row"
        ></tr>
    </table>
</div>

TypeScript代码：-

export class JobExecutionScreenComponent implements OnInit {

columnsToDisplay = [
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod'
];
columnsToDisplay2 = [
    'id',
    'lable',
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod',
    'status'
];
expandedElement: Element | null;
 ngOnInit() {
    this.rendertable();
rendertable() {
    const project = JSON.parse(this.dataService.getObject('project'));
    this.recommendationService
        .getJobList(project.id)
        .subscribe(data => {
             this.jobExecutionList = new MatTableDataSource();
            this.jobExecutionList.data = data;
            this.jobExecutionList.sort = this.sort;
            this.jobExecutionList.paginator = this.paginator;
        });
}

Answer 1

mat-table不支持Mater-Detail情况，您可以使用ngx-nested-data-table https://github.com/daniele-zurico/ngx-nested-data-table

如何将我的行按角度垫表分组

1 个答案: