Material angular 7 – Cabecera de clasificación

Las  <mat-sort-header> y matSort , una directiva angular, se utilizan para añadir capacidad de clasificación a un encabezado de tabla.

En este capítulo, mostraremos la configuración necesaria para mostrar un encabezado de clasificación utilizando material angular.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

importar{módulo de navegador}de@angular/plataforma-browser; importar{ngMódulo}de@angular/core;importar{AppComponent}de./app.import{BrowserAnimationsModule}de@angular/platform-browser/animations; import{MatSortModule}de@angular/materialimport{FormsModule,ReactiveFormsModule}de@angular/forms;@NgModule({ {NgModule
   declaraciones:[AppComponent],
   importaciones:[BrowserModule,BrowserAnimationsModule,MatSortModule,FormsModule,ReactiveFormsModule],
   proveedores:[],
   bootstrap:[AppComponent]})exportclassAppModule{}

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

matSort (matSortChange) ="sortFood($event)">mat-sort-header="name">Postre (100g)mat-sort-header="calorías">Caloriesmat-sort-header="fat">Grasa (g)mat-sort-header="carbohidratos">Carbs (g)mat-sort-header="protein">Protein (g) *ngFor="let food of sortedFood">{{food.nombre}}{{calorías.de.alimentos}}{grasas.de.alimentos}}{carbohidratos.de.alimentos}}{proteínas.de.alimentos}

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

importar{Componente,Inyectable}desde@angular/core;importar{Ordenar}desde@angular/material;exportarfaceFood{ @angular/material
   calorías: número;
   carbohidratos: número;
   grasa: número;
   nombre:cadena;
   proteína: número;}@Componente({ { {)
   selector:app-root,
   templateUrl:app.component.html,
   styleUrls:[app.component.css]})exportclassAppComponent{Componente
   alimentos:Alimentos[]=[{nombre:yogur, calorías:159, grasas:6, carbohidratos:24, proteínas:4}, {nombre:sándwich, calorías:237, grasas:9, carbohidratos:37, proteínas:4}, {nombre:Eclairs, calorías:262, grasa:16, carbohidratos:24, proteína:6}, {nombre:Pastelitos, calorías:305, grasa:4, carbohidratos:67, proteína:4}, {nombre:Panes de jengibre, calorías:356, grasa:16, carbohidratos:49, proteína:4},];
   sortedFood:Alimentos[];constructor(){este.clasificadoAlimentos =este.corte.de.alimentos;};}
   sortFood(sort:Sort){const data =this.foods.slice();if(!sort.active ||| sort.direction ===){this.sortedFood = data;}this.sortedFood = data;}this.sortedFood = data.sort((a, b)=>{const isAsc = sort.direction ===asc;switch(sort.active){casename:return compare(a.name, b.name, isAsc);casecalories:return compare(a.calories, b.calorías, isAsc); casograsa:return compare(a.grasa, b.grasa, isAsc); casocarbohidratos:return compare(a.carbohidratos, b.carbohidratos, isAsc); casoproteína:return compare(a.proteína, b.protein, isAsc);default:return0;}});}}}función compare(a: number |string, b: number |string, isAsc:boolean){return(a b ?-1:1)*(isAsc?1:-1);}

Resultado

Verifique el resultado.

Detalles

  • Aquí, hemos creado una tabla. Añadido matSort y maneja su evento matSortChange.