Question

我是第一次使用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()}
];

这是现在的样子。我希望根据日期对它进行排序。（最上面，最下面）

如果您可以对代码进行有意义的更改，我将不胜感激。谢谢：）

Answer 1

我认为您应该为mat-table提供已经排序的数据。您可以最初根据ELEMENT_DATA属性对date进行排序。在dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

中传递排序后的数据

此外，如果要使用户能够对表数据进行排序，可以使用matSort。访问Mat Table Sort Documentation来实现此目的。

Answer 2

可以通过将matSortDirective和matSortDirection值传递到表格来指定角材料表的默认排序，例如：

<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

在此示例中，默认排序列设置为“名称”列。就您而言，只需使用日期列，然后使用matSortDirection="desc"。如果您不希望将排序箭头符号放在已排序列的顶部，请删除mat-sort-header。

如何在数据表，角材料中按日期排序

2 个答案: