Utilice material angular para crear tablas estadísticas.
Instale Angular Material, la herramienta de desarrollo de componentes (CDK) y la biblioteca de animación Angular, y ejecute el esquema de código
para agregar el esquema de tabla @angular/material
para crear un componente que pueda representar un material angular preestablecido y ordenable. fuentes de datos paginables. [Recomendación del tutorial relacionado: "tutorial angular"]
Genere @angular/material:table texe1
y luego modifíquelo en función de esto.
El archivo html del componente
<div class="mat-elevation-z8">
<tabla mat-table class="tabla-ancho-completo" matSort aria-label="Elementos">
<!-- Columna de identificación -->
<ng-contenedor matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>número de serie</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-contenedor>
<!-- Nombre de columna -->
<ng-contenedor matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef mat-sort-header> nombre de roca y suelo</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-contenedor>
<!-- num1 Columna -->
<ng-contenedor matColumnDef="num1">
<th mat-header-cell *matHeaderCellDef mat-sort-header> cantidad esperada</th>
<td mat-cell *matCellDef="let row">{{row.num1}}</td>
</ng-contenedor>
<!-- num2 Columna -->
<ng-contenedor matColumnDef="num2">
<th mat-header-cell *matHeaderCellDef mat-sort-header> número actual</th>
<td mat-cell *matCellDef="let row">{{row.num2}}</td>
</ng-contenedor>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let fila; columnas: columnas mostradas;"></tr>
</tabla>
<!-- Controlar la longitud de visualización de los datos de la tabla-->
<mat-paginador #paginador
[longitud]="fuente de datos?.datos?.longitud"
[índice de página]="0"
[tamaño de página]="10"
[pageSizeOptions]="[5, 10, 17]"
aria-label="Seleccionar página">
</mat-paginador>
</div> El archivo texe1-datasource.ts del componente
import { DataSource } de '@angular/cdk/collections';
importar {MatPaginator} desde '@angular/material/paginator';
importar {MatSort} desde '@angular/material/sort';
importar {mapa} desde 'rxjs/operadores';
importar {Observable, de as observableOf, fusionar} desde 'rxjs';
// TODO: Reemplace esto con su propio tipo de modelo de datos
interfaz de exportación Texe1Item {
nombre: cadena;
identificación: número;
número1: número;
número2: número;
}
// TODO: reemplaza esto con datos reales de tu aplicación
const EXAMPLE_DATA: Texe1Item[] = [
{id: 1, nombre: 'arcilla limosa', num1:1000, num2:100,},
{id: 2, nombre: 'arcilla limosa limosa', num1:1000, num2:100,},
{id: 3, nombre: 'Arcilla', num1:1000, num2:100,},
{id: 4, nombre: 'Limo arcilloso', num1:1000, num2:100,},
{id: 5, nombre: 'arcilla limosa', num1:1000, num2:100,},
{id: 6, nombre: 'Brecha (brecha)', num1:1000, num2:100,},
{id: 7, nombre: '中沙', num1:1000, num2:1000,},
{id: 8, nombre: 'Suelo orgánico', num1:1000, num2:100,},
{id: 9, nombre: 'Suelo de turba A', num1:1000, num2:100,},
{id: 10, nombre: 'Suelo de turba B', num1:1000, num2:100,},
{id: 11, nombre: 'Limo arenoso', num1:1000, num2:100,},
{id: 12, nombre: 'arena limosa', num1:1000, num2:100,},
{id: 13, nombre: 'arena fina', num1:1000, num2:100,},
{id: 14, nombre: 'arena gruesa', num1:1000, num2:100,},
{id: 15, nombre: 'Grava', num1:1000, num2:100,},
{id: 16, nombre: 'Guijarro (grava)', num1:1000, num2:100,},
{id: 17, nombre: 'Roca (roca)', num1:1000, num2:100,},
];
/**
* Fuente de datos para la vista Texe1. Esta clase debería.
* encapsula toda la lógica para recuperar y manipular los datos mostrados
* (incluyendo clasificación, paginación y filtrado).
*/
clase de exportación Texe1DataSource extiende DataSource<Texe1Item> {
datos: Texe1Item[] = EXAMPLE_DATA;
paginador: MatPaginator | indefinido;
ordenar: MatSort | indefinido;
constructor() {
súper();
}
/**
* Conecte esta fuente de datos a la tabla. La tabla solo se actualizará cuando.
* la secuencia devuelta emite nuevos elementos.
* @returns Una secuencia de los elementos que se van a representar.
*/
conectar(): Observable<Texe1Item[]> {
if (este.paginador && este.ordenar) {
// Combina todo lo que afecta a los datos renderizados en una sola actualización
// flujo para que lo consuma la tabla de datos.
devolver fusión (observableOf (this.data), this.paginator.page, this.sort.sortChange)
.pipe(mapa(() => {
devolver this.getPaggedData(this.getSortedData([...this.data ]));
}));
} demás {
throw Error('Configure el paginador y ordene la fuente de datos antes de conectarse.');
}
}
/**
* Se llama cuando la tabla está siendo destruida. Utilice esta función para limpiar.
* cualquier conexión abierta o liberar cualquier recurso retenido que se haya configurado durante la conexión.
*/
desconectar(): nulo {}
/**
* Paginar los datos (del lado del cliente). Si está utilizando la paginación del lado del servidor,
* esto se sustituiría solicitando los datos adecuados al servidor.
*/
getPaggedData privado (datos: Texe1Item[]): Texe1Item[] {
si (este.paginador) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
devolver datos.splice(startIndex, this.paginator.pageSize);
} demás {
datos de devolución;
}
}
/**
* Ordenar los datos (del lado del cliente). Si está utilizando la clasificación del lado del servidor,
* esto se sustituiría solicitando los datos adecuados al servidor.
*/
getSortedData privado (datos: Texe1Item[]): Texe1Item[] {
if (!this.sort || !this.sort.active || this.sort.direction === '') {
datos de devolución;
}
devolver datos.sort((a, b) => {
const isAsc = this.sort?.direction === 'asc';
cambiar (este.tipo?.activo) {
caso 'nombre': retorno comparar (a.nombre, b.nombre, isAsc);
caso 'id': retorno comparar (+a.id, +b.id, isAsc);
predeterminado: devolver 0;
}
});
}
}
/** Comparador de clasificación simple, por ejemplo, columnas de ID/Nombre (para clasificación del lado del cliente */).
función comparar (a: cadena | número, b: cadena | número, isAsc: booleano): número {
retorno (a <b? -1: 1) * (isAsc? 1: -1);
} El archivo texe1.component.ts del componente
importa { AfterViewInit, Component, ViewChild } de '@angular/core';
importar {MatPaginator} desde '@angular/material/paginator';
importar {MatSort} desde '@angular/material/sort';
importar {MatTable} desde '@angular/material/table';
importar {Texe1DataSource, Texe1Item} desde './texe1-datasource';
@Componente({
selector: 'aplicación-texe1',
URL de plantilla: './texe1.component.html',
URL de estilo: ['./texe1.component.css']
})
la clase de exportación Texe1Component implementa AfterViewInit {
@ViewChild(MatPaginator) paginador!: MatPaginator;
@ViewChild(MatSort) ordenar!: MatSort;
@ViewChild(MatTable) tabla!: MatTable<Texe1Item>;
fuente de datos: Texe1DataSource;
/** Las columnas que se muestran en la tabla. Los ID de las columnas se pueden agregar, eliminar o reordenar */.
columnas mostradas = ['id', 'nombre', 'num1', 'num2'];
constructor() {
this.dataSource = nuevo Texe1DataSource();
}
ngAfterViewInit(): nulo {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
} Finalmente, se muestra en el archivo app.component.html.
<app-texe1></app-texe1>
Representación: 