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进行反馈,火山引擎收到您的反馈后将及时答复和处理。

相关内容

热门资讯

透视肯定!aapoker辅助器... 透视肯定!aapoker辅助器怎么用(透视)ai插件(好像存在有挂);所有人都在同一条线上,像星星一...
透视软件!德州真人透视脚本(透... 透视软件!德州真人透视脚本(透视)可靠技巧(2021已更新)(哔哩哔哩)1、游戏颠覆性的策略玩法,独...
透视最新!aapoker插件(... 透视最新!aapoker插件(透视)万能辅助器(总是是真的有挂)在进入aapoker插件辅助挂后,参...
透视软件!werplan有挂吗... 透视软件!werplan有挂吗(透视)2025新版(2026已更新)(哔哩哔哩)1、实时werpla...
透视透视!aapoker怎么提... 透视透视!aapoker怎么提高中牌率(透视)插件下载(都是真的有挂);1、在aapoker怎么提高...
透视了解!拱趴大菠萝机器人(透... 透视了解!拱趴大菠萝机器人(透视)透明挂教程(2025已更新)(哔哩哔哩)1、拱趴大菠萝机器人透视辅...
透视教学!aapoker透视脚... 透视教学!aapoker透视脚本下载(透视)透视脚本下载(其实是有挂)1、任何aapoker透视脚本...
透视软件!pokemmo内置修... 透视软件!pokemmo内置修改器(透视)曝光教程(2022已更新)(哔哩哔哩)1、每一步都需要思考...
透视总结!aapoker怎么选... 透视总结!aapoker怎么选牌(透视)透视脚本下载(一贯是有挂);1、任何aapoker怎么选牌a...
透视智能ai!智星菠萝辅助(透... 透视智能ai!智星菠萝辅助(透视)攻略教程(2024已更新)(哔哩哔哩);1、起透看视 智星菠萝辅助...