垫排序上的角度垫表调整大小错误答案

【问题标题】：angular mat table resize error on mat sort垫排序上的角度垫表调整大小错误
【发布时间】：2022-03-03 22:46:49
【问题描述】：

这里在mat table resizeColumn 中用来调整table 的列大小。我可以调整两列注释和状态的大小，因为该列没有排序标题，但 uploadTime 和大小此处调整大小列不起作用，当我删除 mat-sort-header 时它开始工作。我找不到问题。如何使用 mat-sort-header 调整大小？？

<table mat-table [dataSource]="dataSource"  matSort (matSortChange)="sortChange($event)"  
    class="mat-elevation-z8">
        <ng-container matColumnDef="annotation">
            <th mat-header-cell *matHeaderCellDef [resizeColumn]="true">Annotation</th>
            <td mat-cell *matCellDef="let data;let i=index">{{data.annotation}}</td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef [resizeColumn]="true">Status</th>
            <td mat-cell *matCellDef="let data;let i=index">{{data.status}}</td>
        </ng-container>
        <ng-container matColumnDef="uploadTime">
            <th mat-header-cell *matHeaderCellDef [resizeColumn]="true"  mat-sort-header>UploadTime</th>
            <td mat-cell *matCellDef="let data;let i=index">{{data.uploadedTime}}</td>
        </ng-container>
        <ng-container matColumnDef="size">
            <th mat-header-cell  *matHeaderCellDef [resizeColumn]="true" mat-sort-header>Size</th>
            <td mat-cell *matCellDef="let data;let i=index">{{data.size}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayColumns"></tr>
        <tr mat-row *matRowDef="let row;columns:displayColumns | paginate: {itemsPerPage: 
          itemsPerPage, currentPage: p,totalItems:size}"></tr>
    </table>

ResizeColumn 指令

import { Directive,OnInit, Renderer2, Input, ElementRef,ViewChild} from '@angular/core';
import { MatSort } from '@angular/material/sort';

@Directive({
  selector: '[resizeColumn]'
})
export class ResizecolDirective implements OnInit {

  @Input("resizeColumn") resizable!:boolean;
  private startX!:number;
  private startWidth!:number;
  private column!: HTMLElement;

  private table!: HTMLElement;

  private pressed!: boolean;

  constructor(private renderer: Renderer2, private el: ElementRef) { 
    this.column = this.el.nativeElement;
  }
  ngOnInit(){
    if (this.resizable) {
      const row = this.renderer.parentNode(this.column);
      const thead = this.renderer.parentNode(row);
      this.table = this.renderer.parentNode(thead);
      const resizer = this.renderer.createElement("span");
      this.renderer.addClass(resizer, "resize-holder");
      this.renderer.appendChild(this.column, resizer);
      this.renderer.listen(resizer, "mousedown", this.onMouseDown);
      this.renderer.listen(this.table, "mousemove", this.onMouseMove);
      this.renderer.listen("document", "mouseup", this.onMouseUp);
    }
  }
  onMouseDown = (event: MouseEvent) => {
    this.pressed = true;
    this.startX = event.pageX;
    this.startWidth = this.column.offsetWidth;
  };

  onMouseMove = (event: MouseEvent) => {
    const offset = 30;
    if (this.pressed && event.buttons) {
      this.renderer.addClass(this.table, "resizing");
      let width =this.startWidth + (event.pageX - this.startX - offset);
      this.renderer.setStyle(this.column, "width", `${width}px`);
    }
  };

  onMouseUp = (event: MouseEvent) => {
    if (this.pressed) {
      this.pressed = false;
      this.renderer.removeClass(this.table, "resizing");
    }
  };


}

【问题讨论】：

标签： angular mat-table

【解决方案1】：

尝试使用 span 包装 <th> 元素的文本，然后将 mat-sort-header 应用到该 span。

<th mat-header-cell *matHeaderCellDef [resizeColumn]="true"><span mat-sort-header>UploadTime</span></th>

在这篇中等帖子的 cmets 中找到：https://medium.com/@imdebasispanda/resize-table-column-angular-5cb58b67367

【讨论】：