0

我正在使用带有 ng-container 的材料表，其中包含 3 件事：

a) th(mat-h​​eader-cell)
b) td(mat-cell)
c) td(mat-footer-cell)

在此表中，页脚行（前行中的数据总计）当前按预期显示在表的底部，但对于此业务案例，他们需要总计行（mat-footer-cell）显示在顶部。我应该如何处理这个？

这是表格的一个片段：

<table mat-table class="status-table" [dataSource]="statSource" matSort #statSort="matSort">

            <ng-container matColumnDef="argName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header class="make-blue" scope="col">
                    ArgName
                </th>
                <td mat-cell class="cursor-pointer"
                    (click)="setTableProperties(this.formatMyData, 'first', 'second', arg.argTitle)"
                    *matCellDef="let area">
                    {{ arg.argTitle | uppercase }}
                </td>
                <td mat-footer-cell *matFooterCellDef>Total</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="statCols"></tr>
            <tr mat-row *matRowDef="let row; columns: statCols"></tr>
            <tr mat-footer-row *matFooterRowDef="statCols"></tr>

</table>

我尝试制作多个表头并将页脚分隔到它们自己的 ng 容器中，但这似乎非常多余并且无法正常工作。重新排列 trs 时它不起作用。因此，也许可能还有其他一些巧妙的方法来定义多个不带冗余的 mat-h​​eaders，或者简单地操纵当前的表结构来适应这一点，但这就是我的知识有限的地方。

所以总而言之，我需要将页脚行移到数据上方，它将位于当前标题列的正下方。

4

1 回答 1

0

我选择执行以下操作并装饰了一些看起来像这样的样式：`

        <ng-container matColumnDef="argName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="make-blue" scope="col">
                <div>ArgName</div>
        <div>Total</div>
            </th>
            <td mat-cell class="cursor-pointer"
                (click)="setTableProperties(this.formatMyData, 'first', 'second', arg.argTitle)"
                *matCellDef="let area">
                {{ arg.argTitle | uppercase }}
            </td>
            <!--<td mat-footer-cell *matFooterCellDef>Total</td>-->
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="statCols"></tr>
        <tr mat-row *matRowDef="let row; columns: statCols"></tr>
        <!--<tr mat-footer-row *matFooterRowDef="statCols"></tr>-->

`

这里的照片

于 2020-04-29T19:17:41.907 回答