Question

当我们通过代码对垫子表进行排序时，垫子排序图标未显示。如何在单击按钮而不是单击材料标题时进行排序。

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

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

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

解决方案2：

这有点古怪，因此要触发图标上的动画，我们需要单击标题。因此，我从mat-header-cell上的组件调用了click事件，但是mat-header-cell是不可点击的，因此我将列名称包装在div中，以便模拟点击

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

在组件中，我们需要为所有要模拟点击的displayedColumns创建一个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;

被计为一次点击，但不显示图标，因此我们将按先前的顺序返回asc desc，以避免在两次点击都是奇怪的情况下调用它。

在所有这些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);

即使在网上，文档和斜角材料的源代码中进行搜索，我也没有找到更好的解决方案。我发现一个类似的问题，没有一个答案。

此解决方案的堆叠闪电战：https://stackblitz.com/edit/mattable-with-custom-sort-emqkbs

角垫表：-自定义排序中缺少排序图标

1 个答案: