Как отсортировать по дате в таблице данных, Angular Материал - PullRequest
Новая
       31

Как отсортировать по дате в таблице данных, Angular Материал

1 голос
/ 01 февраля 2020

Я использую Angular Материал, первый раз. Я застрял с добавлением функциональности для сортировки строки по дате .. т.е. самая последняя дата должна отображаться сверху, а самая старая - снизу.

Я просмотрел angular документацию по материалам, но не смог найти любую соответствующую информацию, чтобы сделать это.

Это мой код:

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()}
];

Вот так это выглядит сейчас. Я хочу, чтобы он был отсортирован по дате .. (последний сверху, самый старый снизу)

Я был бы очень признателен, если бы вы могли внести значимые изменения в код. Спасибо:)

enter image description here

Ответы [ 2 ]

2 голосов
/ 01 февраля 2020

Я думаю, вы должны предоставить mat-table с уже отсортированными данными. Вы можете отсортировать ELEMENT_DATA на основе date свойства изначально. Передайте отсортированные данные здесь в dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

Более того, если вы хотите дать пользователю возможность сортировать данные таблицы, вы можете использовать matSort. Посетите Mat Table Sort Documentation для реализации этого.

1 голос
/ 01 февраля 2020

Angular сортировка по умолчанию таблицы материалов может быть задана путем передачи в таблицу значений 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, если вам не нужен символ стрелки сортировки в верхней части отсортированного столбца.

...