Angular 垫表 : - Sort icon missing on custom sort

Question

当我们按代码对 mat 表进行排序时，mat-sort 图标没有显示。如何通过单击按钮而不是单击 mat- 标题进行排序。

StackBlitzzzz Link

Answer 1

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

 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 上显示，图标变化会在active column 上触发。

堆栈 Blitz :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> 

在组件中，我们需要为我们想要模拟点击的所有显示列创建一个 viewchildren:

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

在你的方法 sortTest(val) 中，我开始变得更老套了，所以我切换了作为参数传递给 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次时点击是奇数。

在所有这些骇人听闻的代码之后，我发出了排序

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); 

我没有找到更好的解决方案，甚至在网上、文档和 Angular Material 的源代码上进行了搜索。我发现了一个没有任何回应的问题。

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