Angular - 如何将整个垫脚行移动到表格顶部

Posted 2023-03-06

【中文标题】Angular - 如何将整个垫脚行移动到表格顶部

【英文标题】：Angular - how to move entire mat-footer-row to top of table

【发布时间】：2020-05-21 19:53:44

【问题描述】：

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

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

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

这是一张表的sn-p：

<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，或者只是操纵当前的表结构来适应这种情况，但我的知识有限。

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

【参考方案1】：

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

        <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>-->

`

here photo