Как отсортировать строки таблицы угловых материалов по свойству, не объявленному в отображаемых столбцах

Question

Вот код, который создает мой 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
    }];
}

Я хочу, чтобы сортировка строк таблицы по умолчанию основывалась на свойствах миллисекунд объектов строк, но я не хочу отображать свойство в таблице. Есть ли способ сделать это? Я ничего не вижу в docs , а установка matSortStart = "desc" просто сортирует таблицу по первому столбцу (в данном случае eventStart).

Answer 1

Вы должны сделать 2 вещи, чтобы достичь этого:

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>

полная работа стекблиц доступен здесь