如何在数据 table、Angular Material 中按日期排序
How to sort by date in Data table, Angular Material
我是第一次使用 Angular Material。
我坚持添加功能以根据日期对行进行排序。即最新日期应显示在顶部，最旧的日期应显示在底部。
我浏览了 angular material 文档，但找不到任何相关信息。
这是我的代码：
view.component.html:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Serial No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category </th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let element"> {{element.cost}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef> Options </th>
<td mat-cell *matCellDef="let element"> <button (click)="getExpenseDetails()"mat-button color="primary">{{element.options}}</button> </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div><!-- <p>view works!</p> -->
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Serial No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category </th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let element"> {{element.cost}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef> Options </th>
<td mat-cell *matCellDef="let element"> <button (click)="getExpenseDetails()"mat-button color="primary">{{element.options}}</button> </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
view.component.ts:
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import * as moment from 'moment';
import { DataSource } from '@angular/cdk/table';
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
constructor(public dialog: MatDialog) {}
displayedColumns: string[] = ['position', 'category', 'cost', 'options', 'date'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() {
this.dataSource.paginator = this.paginator;
console.log(new Date("1998-01-31").toDateString());
}
}
export interface PeriodicElement {
position: number;
category: string;
cost: number;
options: string;
date: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, category: 'Hydrogen', cost: 1.0079, options: 'More', date: new Date("1998-01-31").toDateString() },
{position: 2, category: 'Helium', cost: 4.0026, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 3, category: 'Lithium',cost: 6.941, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 4, category: 'Beryllium', cost: 9.0122, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 5, category: 'Boron', cost: 10.811, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 6, category: 'Carbon', cost: 12.0107, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 7, category: 'Nitrogen',cost: 14.0067, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 8, category: 'Oxygen', cost: 15.9994, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 9, category: 'Fluorine',cost: 18.9984, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 10, category: 'Neon', cost:1797, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 11, category: 'Sodium', cost: 22.9897, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 12, category: 'Magnesiumght', cost: 24.305, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 13, category: 'Aluminum',cost: 26.9815, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 14, category: 'Silicon',cost: 28.0855, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 15, category: 'Phosphoruight', cost: 30.9738, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 16, category: 'Sulfur', cost: 32.065, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 17, category: 'Chlorine',cost: 35.453, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 18, category: 'Argon', cost: 39.948, options: 'More', date: new Date("2000-01-31").toDateString()},
{position: 19, category: 'Potassiumght', cost: 39.0983, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 20, category: 'Calcium',cost: 40.078, options: 'More', date: new Date("1998-01-31").toDateString()}
];
这是目前的样子。
我希望它根据日期排序..（最新的在上面，最旧的在底部）
如果您能对代码进行有意义的更改，我将不胜感激。
谢谢:)
我认为您应该为 mat-table 提供已经排序的数据。您最初可以根据 date 属性 对 ELEMENT_DATA 进行排序。
在 dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
中将排序后的数据传递到这里
此外，如果您想让用户能够对 table 数据进行排序，您可以使用 matSort。访问 Mat Table Sort Documentation 以实现这一点。
Angular material table 可以通过将 matSortDirective 和 matSortDirection 值传递给 table 来指定默认排序，例如：
<mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
同时添加 this.dataSource.sort = this.sort;.
示例：https://stackblitz.com/edit/angular-table-sort-mainframe?file=app%2Ftable-pagination-example.ts
在此示例中，默认排序列设置为 'name' 列。在您的情况下，只需使用日期列，然后使用 matSortDirection="desc"。如果您不想在排序列的顶部显示排序箭头符号，请删除 mat-sort-header。
我是第一次使用 Angular Material。 我坚持添加功能以根据日期对行进行排序。即最新日期应显示在顶部，最旧的日期应显示在底部。
我浏览了 angular material 文档，但找不到任何相关信息。
这是我的代码：
view.component.html:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Serial No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category </th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let element"> {{element.cost}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef> Options </th>
<td mat-cell *matCellDef="let element"> <button (click)="getExpenseDetails()"mat-button color="primary">{{element.options}}</button> </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div><!-- <p>view works!</p> -->
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> Serial No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category </th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="cost">
<th mat-header-cell *matHeaderCellDef> Cost </th>
<td mat-cell *matCellDef="let element"> {{element.cost}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="options">
<th mat-header-cell *matHeaderCellDef> Options </th>
<td mat-cell *matCellDef="let element"> <button (click)="getExpenseDetails()"mat-button color="primary">{{element.options}}</button> </td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let element"> {{element.date | date}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
view.component.ts:
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { Component, OnInit, ViewChild } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import * as moment from 'moment';
import { DataSource } from '@angular/cdk/table';
@Component({
selector: 'app-view',
templateUrl: './view.component.html',
styleUrls: ['./view.component.scss']
})
export class ViewComponent implements OnInit {
constructor(public dialog: MatDialog) {}
displayedColumns: string[] = ['position', 'category', 'cost', 'options', 'date'];
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
ngOnInit() {
this.dataSource.paginator = this.paginator;
console.log(new Date("1998-01-31").toDateString());
}
}
export interface PeriodicElement {
position: number;
category: string;
cost: number;
options: string;
date: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{position: 1, category: 'Hydrogen', cost: 1.0079, options: 'More', date: new Date("1998-01-31").toDateString() },
{position: 2, category: 'Helium', cost: 4.0026, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 3, category: 'Lithium',cost: 6.941, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 4, category: 'Beryllium', cost: 9.0122, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 5, category: 'Boron', cost: 10.811, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 6, category: 'Carbon', cost: 12.0107, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 7, category: 'Nitrogen',cost: 14.0067, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 8, category: 'Oxygen', cost: 15.9994, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 9, category: 'Fluorine',cost: 18.9984, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 10, category: 'Neon', cost:1797, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 11, category: 'Sodium', cost: 22.9897, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 12, category: 'Magnesiumght', cost: 24.305, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 13, category: 'Aluminum',cost: 26.9815, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 14, category: 'Silicon',cost: 28.0855, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 15, category: 'Phosphoruight', cost: 30.9738, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 16, category: 'Sulfur', cost: 32.065, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 17, category: 'Chlorine',cost: 35.453, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 18, category: 'Argon', cost: 39.948, options: 'More', date: new Date("2000-01-31").toDateString()},
{position: 19, category: 'Potassiumght', cost: 39.0983, options: 'More', date: new Date("1998-01-31").toDateString()},
{position: 20, category: 'Calcium',cost: 40.078, options: 'More', date: new Date("1998-01-31").toDateString()}
];
这是目前的样子。 我希望它根据日期排序..（最新的在上面，最旧的在底部）
如果您能对代码进行有意义的更改，我将不胜感激。 谢谢:)
我认为您应该为 mat-table 提供已经排序的数据。您最初可以根据 date 属性 对 ELEMENT_DATA 进行排序。
在 dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
此外，如果您想让用户能够对 table 数据进行排序，您可以使用 matSort。访问 Mat Table Sort Documentation 以实现这一点。
Angular material table 可以通过将 matSortDirective 和 matSortDirection 值传递给 table 来指定默认排序，例如：
<mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc">
同时添加 this.dataSource.sort = this.sort;.
示例：https://stackblitz.com/edit/angular-table-sort-mainframe?file=app%2Ftable-pagination-example.ts
在此示例中，默认排序列设置为 'name' 列。在您的情况下，只需使用日期列，然后使用 matSortDirection="desc"。如果您不想在排序列的顶部显示排序箭头符号，请删除 mat-sort-header。