Estoy tratando de implementar la clasificación usando la versión angular 7.3.
A continuación se muestra mi código fuente:
<table mat-table [dataSource]='dataSource'> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> </table>Aquí está la fuente del archivo javascript:
const ELEMENT_DATA: PeriodicElement[] = [ {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'}, {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'}, {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'}, {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'} ]; @Component({ selector: 'table-basic-example', styleUrls: ['table-basic-example.css'], templateUrl: 'table-basic-example.html', }) export class TableBasicExample { displayedColumns: string[] = ['position', 'name', 'weight', 'symbol']; dataSource = ELEMENT_DATA; }Estoy usando la versión angular 7 y la función de clasificación no puedo escribir. Necesito ayuda en eso ya que soy nuevo en angular
MatSortModule a AppModule . import { MatSortModule } from '@angular/material'; @NgModule({ imports: [ ..., MatSortModule, ], ... }) export class AppModule {} O si tiene otro módulo como MaterialModule :
import { MatSortModule } from '@angular/material'; @NgModule({ exports: [ ..., MatSortModule, ], ... }) export class MaterialModule {} import { MaterialModule } from /* material.module.ts path */; @NgModule({ imports: [ ..., MaterialModule, ], ... }) export class AppModule {} 2.1. Aplique la directiva matSort al elemento de tabla (principal).
2.2. Aplique la directiva mat-sort-header a cada elemento mat-header-cell .
(Referencia: Agregar clasificación a los encabezados de la tabla )
<table mat-table [dataSource]='dataSource' matSort> <ng-container matColumnDef="position"> <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th> <td mat-cell *matCellDef="let element"> {{element.position}} </td> </ng-container> <ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th> <td mat-cell *matCellDef="let element"> {{element.name}} </td> </ng-container> <ng-container matColumnDef="weight"> <th mat-header-cell *matHeaderCellDef mat-sort-header mat-sort-header> Weight </th> <td mat-cell *matCellDef="let element"> {{element.weight}} </td> </ng-container> </table>MatTableDataSource . dataSource = new MatTableDataSource(ELEMENT_DATA); export class TableSortingExample implements OnInit { ... dataSource = new MatTableDataSource(ELEMENT_DATA); @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource.sort = this.sort; } }Muestra de demostración en StackBlitz