Angular mat-table : - 自定义排序中缺少排序图标

Question

当我们按代码对 mat 表进行排序时，mat-sort 图标不显示。如何在单击按钮而不是单击 mat-h​​eader 时进行排序。

StackBlitzzzz Link

Answer 1

最初我认为问题很简单，但继续阅读文档和源代码，Angular 材料不提供此功能，通过订阅可以看出它不起作用：

 ngAfterViewInit() {
    this.sort.sortChange.subscribe((x) => {
      console.log(x);
    });
  }

控制台响应将是：

{active: "name", direction: "asc"}

所以会触发列的id并对其进行排序，但图标不会出现。

我提供了 2 个实现，您可以选择适合自己的一个。

解决方案 1：

一个快速的解决方法是强制显示所有图标，但没有太大意义，因为我们想专注于单个列。要做到这一点，只需在 css 中完成：

::ng-deep .mat-sort-header-arrow {
  opacity: 1 !important;
 }

header 上的所有图标将只显示在具有 mat-sort-header 属性的 header 上，并且将在活动列上触发图标更改。

Stackblitz：https://stackblitz.com/edit/mattable-with-custom-sort-etzkcy

解决方案 2：

这有点hacky，所以为了触发图标上的动画，我们需要点击标题。因此，我从 mat-h​​eader-cell 上的组件调用单击事件，但 mat-h​​eader-cell 不可单击，因此我将列名包装在 div 中，以模拟单击

      <mat-header-cell *matHeaderCellDef mat-sort-header>
        <div #position>Position</div>
      </mat-header-cell> 

在组件中，我们需要为所有要模拟点击的displayColumns创建一个viewchildren：

@ViewChild('position') position:ElementRef;
@ViewChild('name') name:ElementRef; 

在您的方法 sortTest(val) 中，我开始变得更加 hacky，因此我切换了在 val 中作为参数传递的字符串的值，以调用右标题上的右键单击，因为 div 的名称和列的比例为 1:1

 switch(val) {
      case "name": { 
        this.name.nativeElement.click()
        this.name.nativeElement.click()            
        break; 
        } 
      case "position": { 
        this.position.nativeElement.click()
        this.position.nativeElement.click()            
        break; 
      }
    } 

我为什么打电话

            this.position.nativeElement.click()

2 次？因为据我了解

    this.sort.active = val;

算作一次点击，但不显示图标，所以我们会按之前的顺序升序返回，以避免我称它为 2 次点击是奇怪的。

在所有这些 hacky 代码之后，我发出了排序

this.sort.active = val;

    this.dataSource.sort = this.sort;
    const sortState: Sort = {active: val, direction: this.sort.direction === 'asc' ? 'desc' : 'asc'};

    this.sort.direction = sortState.direction;
    this.sort.sortChange.emit(sortState); 

我没有找到更好的解决方案，甚至在网上搜索，文档和角度材料的源代码。我发现这样一个问题没有一个回应。

此解决方案的 Stackblitz：https://stackblitz.com/edit/mattable-with-custom-sort-emqkbs