首页-教程-Web前端

聊聊怎么利用angular Material做统计表格

 2389

怎么利用angular Material做统计表格？下面本篇文章给大家介绍一下用angular Material 做统计表格的方法，希望对大家有所帮助！


聊聊怎么利用angular Material做统计表格


用angular Material 做统计表格

安装 Angular Material、组件开发工具 (CDK) 和 Angular 动画库，并运行代码原理图

  1. ng add @angular/material

表格原理图将创建一个组件，它可以渲染出一个预置了可排序、可分页数据源的 Angular Material。

  1. ng generate @angular/material:table texe1

然后在这的基础上进行修改。

该组件的html文件

  1. <div class="mat-elevation-z8">
  2.   <table mat-table class="full-width-table" matSort aria-label="Elements">
  3.     <!-- Id Column -->
  4.     <ng-container matColumnDef="id">
  5.       <th mat-header-cell *matHeaderCellDef mat-sort-header>序号</th>
  6.       <td mat-cell *matCellDef="let row">{{row.id}}</td>
  7.     </ng-container>
  8.  
  9.     <!-- Name Column -->
  10.     <ng-container matColumnDef="name">
  11.       <th mat-header-cell *matHeaderCellDef mat-sort-header>  岩土名</th>
  12.       <td mat-cell *matCellDef="let row">{{row.name}}</td>
  13.     </ng-container>
  14.  
  15.     <!-- num1 Column -->
  16.     <ng-container matColumnDef="num1">
  17.       <th mat-header-cell *matHeaderCellDef mat-sort-header>  期望数量</th>
  18.       <td mat-cell *matCellDef="let row">{{row.num1}}</td>
  19.     </ng-container>
  20.  
  21.     <!-- num2 Column -->
  22.     <ng-container matColumnDef="num2">
  23.       <th mat-header-cell *matHeaderCellDef mat-sort-header>  当前数量</th>
  24.       <td mat-cell *matCellDef="let row">{{row.num2}}</td>
  25.     </ng-container>
  26.  
  27.  
  28.  
  29.     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  30.     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  31.   </table>
  32.  
  33.   <!-- 控制表格数据的显示长度 -->
  34.   <mat-paginator #paginator
  35.       [length]="dataSource?.data?.length"
  36.       [pageIndex]="0"
  37.       [pageSize]="10"
  38.       [pageSizeOptions]="[5, 10, 17]"
  39.       aria-label="Select page">
  40.   </mat-paginator>
  41. </div>

该组件的texe1-datasource.ts文件

  1. import { DataSource } from '@angular/cdk/collections';
  2. import { MatPaginator } from '@angular/material/paginator';
  3. import { MatSort } from '@angular/material/sort';
  4. import { map } from 'rxjs/operators';
  5. import { Observable, of as observableOf, merge } from 'rxjs';
  6.  
  7. // TODO: Replace this with your own data model type
  8. export interface Texe1Item {
  9.   name: string;
  10.   id: number;
  11.   num1: number;
  12.   num2: number;
  13. }
  14.  
  15. // TODO: replace this with real data from your application
  16. const EXAMPLE_DATA: Texe1Item[] = [
  17.   {id: 1, name: '粉质粘土', num1:1000, num2:100,},
  18.   {id: 2, name: '淤泥质粉质粘土', num1:1000, num2:100,},
  19.   {id: 3, name: '粘土', num1:1000, num2:100,},
  20.   {id: 4, name: '粘质粉土', num1:1000, num2:100,},
  21.   {id: 5, name: '淤泥质粘土', num1:1000, num2:100,},
  22.   {id: 6, name: '圆砾（角砾）', num1:1000, num2:100,},
  23.   {id: 7, name: '中砂', num1:1000, num2:1000,},
  24.   {id: 8, name: '有机质土', num1:1000, num2:100,},
  25.   {id: 9, name: '泥炭质土A', num1:1000, num2:100,},
  26.   {id: 10, name: '泥炭质土B', num1:1000, num2:100,},
  27.   {id: 11, name: '砂质粉土', num1:1000, num2:100,},
  28.   {id: 12, name: '粉砂', num1:1000, num2:100,},
  29.   {id: 13, name: '细砂', num1:1000, num2:100,},
  30.   {id: 14, name: '粗砂', num1:1000, num2:100,},
  31.   {id: 15, name: '砾砂', num1:1000, num2:100,},
  32.   {id: 16, name: '卵石（碎石）', num1:1000, num2:100,},
  33.   {id: 17, name: '漂石（块石）', num1:1000, num2:100,},
  34.  
  35. ];
  36.  
  37. /**
  38.  * Data source for the Texe1 view. This class should
  39.  * encapsulate all logic for fetching and manipulating the displayed data
  40.  * (including sorting, pagination, and filtering).
  41.  */
  42. export class Texe1DataSource extends DataSource<Texe1Item> {
  43.   data: Texe1Item[] = EXAMPLE_DATA;
  44.   paginator: MatPaginator | undefined;
  45.   sort: MatSort | undefined;
  46.  
  47.   constructor() {
  48.     super();
  49.   }
  50.  
  51.   /**
  52.    * Connect this data source to the table. The table will only update when
  53.    * the returned stream emits new items.
  54.    * @returns A stream of the items to be rendered.
  55.    */
  56.   connect(): Observable<Texe1Item[]> {
  57.     if (this.paginator && this.sort) {
  58.       // Combine everything that affects the rendered data into one update
  59.       // stream for the data-table to consume.
  60.       return merge(observableOf(this.data), this.paginator.page, this.sort.sortChange)
  61.         .pipe(map(() => {
  62.           return this.getPagedData(this.getSortedData([...this.data ]));
  63.         }));
  64.     } else {
  65.       throw Error('Please set the paginator and sort on the data source before connecting.');
  66.     }
  67.   }
  68.  
  69.   /**
  70.    *  Called when the table is being destroyed. Use this function, to clean up
  71.    * any open connections or free any held resources that were set up during connect.
  72.    */
  73.   disconnect(): void {}
  74.  
  75.   /**
  76.    * Paginate the data (client-side). If you're using server-side pagination,
  77.    * this would be replaced by requesting the appropriate data from the server.
  78.    */
  79.   private getPagedData(data: Texe1Item[]): Texe1Item[] {
  80.     if (this.paginator) {
  81.       const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
  82.       return data.splice(startIndex, this.paginator.pageSize);
  83.     } else {
  84.       return data;
  85.     }
  86.   }
  87.  
  88.   /**
  89.    * Sort the data (client-side). If you're using server-side sorting,
  90.    * this would be replaced by requesting the appropriate data from the server.
  91.    */
  92.   private getSortedData(data: Texe1Item[]): Texe1Item[] {
  93.     if (!this.sort || !this.sort.active || this.sort.direction === '') {
  94.       return data;
  95.     }
  96.  
  97.     return data.sort((a, b) => {
  98.       const isAsc = this.sort?.direction === 'asc';
  99.       switch (this.sort?.active) {
  100.         case 'name': return compare(a.name, b.name, isAsc);
  101.         case 'id': return compare(+a.id, +b.id, isAsc);
  102.         default: return 0;
  103.       }
  104.     });
  105.   }
  106. }
  107.  
  108. /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
  109. function compare(a: string | number, b: string | number, isAsc: boolean): number {
  110.   return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  111. }

该组件的texe1.component.ts文件

  1. import { AfterViewInit, Component, ViewChild } from '@angular/core';
  2. import { MatPaginator } from '@angular/material/paginator';
  3. import { MatSort } from '@angular/material/sort';
  4. import { MatTable } from '@angular/material/table';
  5. import { Texe1DataSource, Texe1Item } from './texe1-datasource';
  6.  
  7. @Component({
  8.   selector: 'app-texe1',
  9.   templateUrl: './texe1.component.html',
  10.   styleUrls: ['./texe1.component.css']
  11. })
  12. export class Texe1Component implements AfterViewInit {
  13.   @ViewChild(MatPaginator) paginator!: MatPaginator;
  14.   @ViewChild(MatSort) sort!: MatSort;
  15.   @ViewChild(MatTable) table!: MatTable<Texe1Item>;
  16.   dataSource: Texe1DataSource;
  17.  
  18.   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  19.   displayedColumns = ['id', 'name','num1','num2'];
  20.  
  21.   constructor() {
  22.     this.dataSource = new Texe1DataSource();
  23.   }
  24.  
  25.   ngAfterViewInit(): void {
  26.     this.dataSource.sort = this.sort;
  27.     this.dataSource.paginator = this.paginator;
  28.     this.table.dataSource = this.dataSource;
  29.   }
  30. }

最后再app.component.html文件中进行显示。

  1. <app-texe1></app-texe1>

效果图：


聊聊怎么利用angular Material做统计表格

TAG标签：
本文网址：https://www.zztuku.com/detail-12485.html
站长图库 - 聊聊怎么利用angular Material做统计表格
申明：本文转载于《CSDN》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐