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 配合使用来显示单元格内容。

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