AngularMaterial7–表格
创始人
2024-10-28 07:32:04
0

Angular Material 是基于 Angular 的一套 UI 组件库,提供了丰富、易用且专业的 UI 组件,包括表格、按钮、卡片、对话框、菜单、导航栏、进度条、输入等各种组件。

在 Angular Material 7 中,表格是其中一个常用的组件之一。Angular Material 提供了两种表格来满足不同的需求,分别是 MatTable 和 CdkTable。下面我们来具体了解这两个组件。

  1. MatTable

MatTable 是 Angular Material 表格组件中的一个,它是基于表格模块(MatTableModule)实现的。MatTable 提供了分页、排序和筛选等功能,可以帮助我们展示复杂数据,方便进行筛选和搜索。

使用 MatTable 时,我们需要定义数据源(DataSource)和显示列(Columns)。

定义数据源:

  • 导入需要用到的类:

    import { Component } from '@angular/core';
    import { MatTableDataSource } from '@angular/material/table';
    
  • 定义数据源:

    export interface PeriodicElement {
      name: string;
      position: number;
      weight: number;
      symbol: string;
    }
    
    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'},
      {position: 5, name: 'Boron', weight: 10.81, symbol: 'B'},
      {position: 6, name: 'Carbon', weight: 12.011, symbol: 'C'},
      {position: 7, name: 'Nitrogen', weight: 14.007, symbol: 'N'},
      {position: 8, name: 'Oxygen', weight: 15.999, symbol: 'O'},
      {position: 9, name: 'Fluorine', weight: 18.998, symbol: 'F'},
      {position: 10, name: 'Neon', weight: 20.180, symbol: 'Ne'},
    ];
    
    export class TableBasicExample {
      dataSource = new MatTableDataSource(ELEMENT_DATA);
    }
    

定义显示列:

在模板中使用 MatTable:


    
    
    
    
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}

其中,matColumnDef 属性代表数据源中的对应属性,与 mat-header-cell 和 mat-cell 配合使用来显示单元格内容。

  1. CdkTable

CdkTable 是 Angular Material 7 中的一个基于 CDK 组件库开发的表格组件,是一个高度可定制的表格组件,可以实现各种复杂的表格功能。

使用 CdkTable 时,与 MatTable 类似,也需要定义数据源和显示列。

定义数据源:

  • 导入需要用到的类:

    import { Component } from '@angular/core';
    import { CdkTableModule } from '@angular/cdk/table';
    
  • 定义数据源:

    export interface PeriodicElement {
      name: string;
      position: number;
      weight: number;
      symbol: string;
    }
    
    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'},
      {position: 5, name: 'Boron', weight: 10.81, symbol: 'B'},
      {position: 6, name: 'Carbon', weight: 12.011, symbol: 'C'},
      {position: 7, name: 'Nitrogen', weight: 14.007, symbol: 'N'},
      {position: 8, name: 'Oxygen', weight: 15.999, symbol: 'O'},
      {position: 9, name: 'Fluorine', weight: 18.998, symbol: 'F'},
      {position: 10, name: 'Neon', weight: 20.180, symbol: 'Ne'},
    ];
    
    /** An example database that the data source uses to retrieve data for the table. */
    export class ExampleDataSource {
      data = ELEMENT_DATA;
      sort: MatSort;
      filter: string = '';
    
      /** Connect function called by the table to retrieve one stream containing the data to render. */
      connect(): Observable {
        const displayDataChanges = [
          this.sort.sortChange,
        ];
    
        return merge(...displayDataChanges).pipe(
          map(() => {
            // Filter data
            let data = this.data.slice().filter((item: any) => {
              const searchStr = ((item.name + item.symbol).toLowerCase());
              return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
            });
    
            // Sort data
            const dataSorted = this.getSortedData(data.slice());
    
            return dataSorted;
          })
        );
      }
    
      /** Returns a sorted copy of the data. */
      getSortedData(data: PeriodicElement[]): PeriodicElement[] {
        if (!this.sort.active || this.sort.direction === '') {
          return data;
        }
    
        return data.slice().sort((a, b) => {
          const isAsc = this.sort.direction === 'asc';
          switch (this.sort.active) {
            case 'position': return compare(a.position, b.position, isAsc);
            case 'name': return compare(a.name, b.name, isAsc);
            case 'weight': return compare(a.weight, b.weight, isAsc);
            case 'symbol': return compare(a.symbol, b.symbol, isAsc);
            default: return 0;
          }
        });
      }
    
      disconnect() {}
    }
    
    /** Simple sort comparator for example ID/Name columns (for client-side sorting). */
    function compare(a: number | string, b: number | string, isAsc: boolean) {
      return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
    }
    

定义显示列:

在模板中使用 CdkTable:


    
    
    
    
No. {{element.position}} Name {{element.name}} Weight {{element.weight}} Symbol {{element.symbol}}

需要注意的是,CdkTable 需要导入 CdkTableModule、MatPaginatorModule、MatSortModule 等模块才能使用。

以上是 Angular Material 7 中表格的使用方法。无论是 MatTable 还是 CdkTable,都提供了分页、排序、筛选等功能,可以根据不同的需求使用不同的组件。在实际开发中,我们可以根据数据的复杂程度和展示需求选择不同的表格组件。 免责声明:本文内容通过AI工具匹配关键字智能整合而成,仅供参考,火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见,您可以通过联系service@volcengine.com进行反馈,火山引擎收到您的反馈后将及时答复和处理。

相关内容

热门资讯

wpk ai辅助!wPk的确真... wpk ai辅助!wPk的确真的有挂,wpK的确真的有挂,2025新版(有挂黑科技);1、下载好wp...
WePoKe透明挂!wepko... WePoKe透明挂!wepkoe有外 挂,WepokE的确是有挂的,细节方法(有挂方法);原来确实真...
德州之星辅助!德扑之星真破解套... 德州之星辅助!德扑之星真破解套路,菠萝德州切实有挂(详细ai辅助有用教程)是一款可以让一直输的玩家,...
wpk有辅助挂!wpk透视辅助... wpk有辅助挂!wpk透视辅助器(wpK)就是真的有挂-详细透视教程1.wpk ai辅助创建新账号,...
wepoke智能ai!wepo... wepoke智能ai!wepoke计算辅助,wepoke软件透明挂存在,微扑克教程(有挂脚本)1、许...
德州ai辅助软件!德州之星有外... 德州ai辅助软件!德州之星有外 挂,德州扑克切实存在有挂(详细猫腻教程);人气非常高,ai更新快且高...
wpk ai辅助(wpK)wp... wpk ai辅助(wpK)wpk微扑克辅助(透视)一直真的有挂(分享教程)1、下载好微扑克辅助软件之...
WePoKe透明挂!wepok... WePoKe透明挂!wepoke美元局稳,wEpOke原来真的有挂,细节揭秘(有挂规律);支持2-1...
德州之星插件!德州辅助软件开发... 德州之星插件!德州辅助软件开发定制,云扑克德州本来是有挂(详细辅助挂教程)1、每一步都需要思考,不同...
wpk透视辅助工具!wpk数据... wpk透视辅助工具!wpk数据透视(WPk)一贯真的有挂-详细辅助挂教程;1、点击下载安装,wpk插...