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

Вот код, который создает мою модель таблицы:

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

Почему бы вам не отсортировать данные по ts стороне? rows: rowData.sort((a, b) => a.milliseconds - b.milliseconds).reverse()

— 28.05.2019 05:47

Почему бы вам просто не сортировать по b.milliseconds - a.milliseconds, а сортировать в обратном порядке, а затем в обратном порядке, кажется пустой тратой обратного.

— 28.05.2019 07:11

@prindev это то, что я делаю, за исключением того, что я делаю b.milliseconds - a.milliseconds вместо обратного. Однако таблица не отображается как отсортированная.

— 28.05.2019 17:01

@HelloWorld, ответ ниже сработал для вас?

— 06.06.2019 10:38

angular typescript angular-material-table

28.05.2019 04:39

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

1 116

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Добавьте matSortActive = "milliseconds", чтобы сортировка производилась по этому столбцу, вы уже знали matSortDirection = "desc", который будет работать при добавлении в элемент <table mat-table>
Добавьте 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>

завершить работу stackblitz доступен здесь

28.05.2019 05:37