时间戳

首页 > 解决方案 > 如何按未在显示的列中声明的属性对角度材料表行进行排序

angular - 如何按未在显示的列中声明的属性对角度材料表行进行排序

问题描述

这是创建我的 tableModel 的代码：

const rowData = [{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d750f',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 3524583453452
},{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d7534',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 35245824528
},{
        id: '74b0d34f-1e2f-47d1-b1ea-55658d5d7545',
        assetId: '9ff317cd-3b75-433d-a32b-949c67b84eee',
        type: 'DATA_RECORDING',
        eventStart: '2019-05-01T00:00:00Z',
        eventEnd: '2019-05-01T00:00:00Z',
        assetName: 584,
        milliseconds: 13219245949
}];

tableModel(data: Array<dataObj>) {
    return [{
        headers: ['DATE LOGGED', 'ASSET ID', 'DIVISION NAME', 'TYPE'],
        displayedColumns: ['eventStart', 'assetId', 'divisionName', 'type'],
        rows: rowData
    }];
}

我希望表行的默认排序基于行对象的“毫秒”属性，但我不想在表中显示该属性。有没有办法做到这一点？我在文档中看不到任何关于它的内容，设置 matSortStart="desc" 只是根据第一列（在本例中为 eventStart）对表进行排序。

标签： angulartypescriptangular-material-table

解决方案

你必须做两件事来实现这一点：

  1. 添加matSortActive="milliseconds"以便通过此列完成排序，您已经知道matSortDirection="desc"添加到<table mat-table>元素时哪个会起作用
  2. 添加隐藏毫秒列（我们放在最后）的css，因为您不想显示它

相关的 CSS：

td.mat-cell:last-of-type,
th.mat-header-cell:last-of-type
{display:none;}

相关的 HTML：

<table mat-table [dataSource]="dataSource" matSort matSortActive="milliseconds" matSortDirection="desc" class="mat-elevation-z8">

    <!-- id Column -->
    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> id. </th>
        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- type Column -->
    <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> type </th>
        <td mat-cell *matCellDef="let element"> {{element.type}} </td>
    </ng-container>

    <!-- assetName Column -->
    <ng-container matColumnDef="assetName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> assetName </th>
        <td mat-cell *matCellDef="let element"> {{element.assetName}} </td>
    </ng-container>

    <!-- milliseconds Column 
  -->
    <ng-container matColumnDef="milliseconds" class='hideMe'>
        <th mat-header-cell *matHeaderCellDef mat-sort-header> milliseconds </th>
        <td mat-cell *matCellDef="let element"> {{element.milliseconds}} </td>
    </ng-container>

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

完整的工作堆栈闪电战可在此处获得

推荐阅读