用angular Material 做統(tǒng)計(jì)表格

安裝 Angular Material、組件開發(fā)工具 (CDK) 和 Angular 動(dòng)畫庫，并運(yùn)行代碼原理圖

ng add @angular/material

表格原理圖將創(chuàng)建一個(gè)組件，它可以渲染出一個(gè)預(yù)置了可排序、可分頁數(shù)據(jù)源的 Angular Material

ng generate @angular/material:table texe1

然后在這的基礎(chǔ)上進(jìn)行修改。
該組件的html文件

<div class="mat-elevation-z8"><table mat-table class="full-width-table" matSort aria-label="Elements"><!-- Id Column --><ng-container matColumnDef="id"><th mat-header-cell *matHeaderCellDef mat-sort-header>序號(hào)</th><td mat-cell *matCellDef="let row">{{row.id}}</td></ng-container><!-- Name Column --><ng-container matColumnDef="name"><th mat-header-cell *matHeaderCellDef mat-sort-header> 巖土名</th><td mat-cell *matCellDef="let row">{{row.name}}</td></ng-container><!-- num1 Column --><ng-container matColumnDef="num1"><th mat-header-cell *matHeaderCellDef mat-sort-header> 期望數(shù)量</th><td mat-cell *matCellDef="let row">{{row.num1}}</td></ng-container><!-- num2 Column --><ng-container matColumnDef="num2"><th mat-header-cell *matHeaderCellDef mat-sort-header> 當(dāng)前數(shù)量</th><td mat-cell *matCellDef="let row">{{row.num2}}</td></ng-container><tr mat-header-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr></table><!-- 控制表格數(shù)據(jù)的顯示長度 --><mat-paginator #paginator[length]="dataSource?.data?.length"[pageIndex]="0"[pageSize]="10"[pageSizeOptions]="[5, 10, 17]"aria-label="Select page"></mat-paginator> </div>

該組件的texe1-datasource.ts文件

import { DataSource } from '@angular/cdk/collections'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { map } from 'rxjs/operators'; import { Observable, of as observableOf, merge } from 'rxjs';// TODO: Replace this with your own data model type export interface Texe1Item {name: string;id: number;num1: number;num2: number; }// TODO: replace this with real data from your application const EXAMPLE_DATA: Texe1Item[] = [{id: 1, name: '粉質(zhì)粘土', num1:1000, num2:100,},{id: 2, name: '淤泥質(zhì)粉質(zhì)粘土', num1:1000, num2:100,},{id: 3, name: '粘土', num1:1000, num2:100,},{id: 4, name: '粘質(zhì)粉土', num1:1000, num2:100,},{id: 5, name: '淤泥質(zhì)粘土', num1:1000, num2:100,},{id: 6, name: '圓礫（角礫）', num1:1000, num2:100,},{id: 7, name: '中砂', num1:1000, num2:1000,},{id: 8, name: '有機(jī)質(zhì)土', num1:1000, num2:100,},{id: 9, name: '泥炭質(zhì)土A', num1:1000, num2:100,},{id: 10, name: '泥炭質(zhì)土B', num1:1000, num2:100,},{id: 11, name: '砂質(zhì)粉土', num1:1000, num2:100,},{id: 12, name: '粉砂', num1:1000, num2:100,},{id: 13, name: '細(xì)砂', num1:1000, num2:100,},{id: 14, name: '粗砂', num1:1000, num2:100,},{id: 15, name: '礫砂', num1:1000, num2:100,},{id: 16, name: '卵石（碎石）', num1:1000, num2:100,},{id: 17, name: '漂石（塊石）', num1:1000, num2:100,},];/*** Data source for the Texe1 view. This class should* encapsulate all logic for fetching and manipulating the displayed data* (including sorting, pagination, and filtering).*/ export class Texe1DataSource extends DataSource<Texe1Item> {data: Texe1Item[] = EXAMPLE_DATA;paginator: MatPaginator | undefined;sort: MatSort | undefined;constructor() {super();}/*** Connect this data source to the table. The table will only update when* the returned stream emits new items.* @returns A stream of the items to be rendered.*/connect(): Observable<Texe1Item[]> {if (this.paginator && this.sort) {// Combine everything that affects the rendered data into one update// stream for the data-table to consume.return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange).pipe(map(() => {return this.getPagedData(this.getSortedData([...this.data ]));}));} else {throw Error('Please set the paginator and sort on the data source before connecting.');}}/*** Called when the table is being destroyed. Use this function, to clean up* any open connections or free any held resources that were set up during connect.*/disconnect(): void {}/*** Paginate the data (client-side). If you're using server-side pagination,* this would be replaced by requesting the appropriate data from the server.*/private getPagedData(data: Texe1Item[]): Texe1Item[] {if (this.paginator) {const startIndex = this.paginator.pageIndex * this.paginator.pageSize;return data.splice(startIndex, this.paginator.pageSize);} else {return data;}}/*** Sort the data (client-side). If you're using server-side sorting,* this would be replaced by requesting the appropriate data from the server.*/private getSortedData(data: Texe1Item[]): Texe1Item[] {if (!this.sort || !this.sort.active || this.sort.direction === '') {return data;}return data.sort((a, b) => {const isAsc = this.sort?.direction === 'asc';switch (this.sort?.active) {case 'name': return compare(a.name, b.name, isAsc);case 'id': return compare(+a.id, +b.id, isAsc);default: return 0;}});} }/** Simple sort comparator for example ID/Name columns (for client-side sorting). */ function compare(a: string | number, b: string | number, isAsc: boolean): number {return (a < b ? -1 : 1) * (isAsc ? 1 : -1); }

該組件的texe1.component.ts文件

import { AfterViewInit, Component, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTable } from '@angular/material/table'; import { Texe1DataSource, Texe1Item } from './texe1-datasource';@Component({selector: 'app-texe1',templateUrl: './texe1.component.html',styleUrls: ['./texe1.component.css'] }) export class Texe1Component implements AfterViewInit {@ViewChild(MatPaginator) paginator!: MatPaginator;@ViewChild(MatSort) sort!: MatSort;@ViewChild(MatTable) table!: MatTable<Texe1Item>;dataSource: Texe1DataSource;/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */displayedColumns = ['id', 'name','num1','num2'];constructor() {this.dataSource = new Texe1DataSource();}ngAfterViewInit(): void {this.dataSource.sort = this.sort;this.dataSource.paginator = this.paginator;this.table.dataSource = this.dataSource;} }

最后再app.component.html文件中進(jìn)行顯示。

<app-texe1></app-texe1>

效果圖：

總結(jié)

以上是生活随笔為你收集整理的用angular Material 做统计表格的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。