Angular系列之MatTable小技巧

介绍

项目中使用了Angular 6框架，同时页面式样使用的是官方出的material。

  
    
      
      
    
    
      
      
    
  
  
     序号 
     {
     { i + 1}} 
  
  
     产品编号 
     {
     {element.code}} 
  
  
     产品名称 
     {
     {element.name}} 
  
  
     产品层级 
     {
     {element.level | level}} 
  
  
     产品状态 
    {
     {element.state | enable}}
  
  
     创建人 
     {
     {showName(element.createdBy)}} 
  
  
     创建时间 
     {
     {element.createdDate | date: 'yyyy-MM-dd HH:mm:ss'}} 
  
  
     修改人 
     {
     {showName(element.lastModifiedBy)}} 
  
  
     修改时间 
     {
     {element.lastModifiedDate | date: 'yyyy-MM-dd HH:mm:ss'}}
    
  
  
     操作 
    
      
        mode_edit
      
      
        play_arrow
      
      
        pause
      
      
        delete
      
    
  
  
  

1. 列宽设置

如代码所示，最后一列为 matColumnDef="operate"，在代码渲染时，会在该列添加 mat-column-operate 和 cdk-column-operate 两个样式，这两个样式的规则是固定的：mat-column-(cdk-column-)+列名, 因此就可以通过设置两个样式中的一个，就可以控制该列的显示效果。在本代码中，由于operate列为3个按钮，默认样式下，无法在一行显示，可以进行设置列宽，确保3个按钮显示在一行：

.mat-column-operate {
    width: 125px;  // 每个按钮的width=40px，所以列宽比按钮总和略宽即可
}

2. 固定表头

在代码中有表头的设置。其中displayedColumns用于设置哪些列需要渲染出来，内容为string数组，且数据必须为上面代码中定义过的列名。sticky: true则是用来设置表头固定的，即较多数据时，显示竖向滚动条，滑动滚动条时，列表位置不变。需要注意的是，要想sticky设置起作用，需要对table的parent容器设置大小。
例子：

.table-container {
  overflow: auto;
  max-height: calc(100vh - 270px);   // 通过css3的calc函数，设置自适应
}

3. 官方部分代码解析

在官方的例子中，有一部分代码写的很飘逸，充分发挥了函数式编程的优势。

下面进行代码解析

merge(this.sort.sortChange, this.paginator.page)  // 通过merge操作，将两个对象组装到一个操作过程中，两个对象，任意一个变更都会被监听到
  .pipe(
    startWith({}), // 设置默认值
    switchMap(() => {
      this.isLoadingResults = true;  // 启动加载框
      return this.exampleDatabase!.getRepoIssues(
        this.sort.active, this.sort.direction, this.paginator.pageIndex); // return返回一个Observable对象
    }),
    map(data => {
      // Flip flag to show that loading has finished.
      this.isLoadingResults = false;
      this.isRateLimitReached = false;
      this.resultsLength = data.total_count;

      return data.items;  // return返回值，将会重新返回到流里面，参与后续的计算
    }),
    catchError(() => {
      this.isLoadingResults = false;
      // Catch if the GitHub API has reached its rate limit. Return empty data.
      this.isRateLimitReached = true;
      return observableOf([]);  // 捕获异常后，然后空的对象，保证数据流正常进行
    })
  ).subscribe(data => this.data = data);  // 这里的data对应着 上一个return data.items

---

个人简介
作者：笑笑粑粑  
曾用网名：TinyKing
一个爱好广泛的CRUD程序猿 ^_^