在 Angular Material MatSortable 中禁用第三状态

Question

MatSortable的排序方向有3种状态。有没有办法禁用第三状态？它有 'asc' | 'desc' | ''，我想只有 'asc' | 'desc' 可用。我目前正在过滤排序方向，但我想知道从用户的角度来看这是否足够直观以至于看起来不像是错误，即使 header 确实显示了带有当前排序方向的箭头（见下图） .

Oninit 生命周期挂钩我正在设置排序默认值，认为将 disableClear 设置为 true 会解决此问题，但 no-go。任何帮助表示赞赏！

defaultSort: MatSortable = {
  id: 'displayName',
  start: 'asc',
  /**
   * Whether to disable the user from clearing the sort by finishing the sort direction cycle.
   * May be overriden by the MatSortable's disable clear input.
   */
  disableClear: True
};

ngOnInit() {
  this.sort.sort(this.defaultSort);

  this.sort.sortChange.pipe(
    filter(sort => !!sort.direction),
    switchMap(sort => {
      // makes API request only with an actual direction.
    })
  );
}

无排序方向：

排序方向：

Answer 1

我对你的代码有点不清楚，但它与此类似：

你的组件上有这个

@ViewChild(MatSort) sort: MatSort;

和

  ngOnInit() {
    ....
    this.dataSource.sort = this.sort;
  }

在定义排序后添加这一行

this.sort.disableClear = true;

Example Stackblitz

Answer 2

添加 Flignats 提到的行对我不起作用，所以我不得不在模板中添加 disableClear，例如：

<th mat-sort-header="firstName" disableClear>First name</th>

我希望这会对某人有所帮助。

Answer 3

你的组件上有这个

@ViewChild(MatSort) 排序：MatSort；

 ::ng-deep.mat-sort-header-arrow[style] {
// Hide default arrow stem
content: url('your icon);
height: 24px;
width: 20px;

}

在定义排序后添加这一行

this.sort.disableClear = true;

Answer 4

您的回答很有帮助。添加 'disableClear' 也解决了我的其他问题，下面是详细信息。

当我们使用 mat 默认运动功能时，当我们第三次单击排序箭头时，我们得到 sort.direction 为空。这让我们写一些自定义代码，但是当我们添加 'disableClear' 到模板，第 3 次我们得到的值是 'asc'。

感谢您的回答

在 Angular Material MatSortable 中禁用第三状态

Disable 3rd state in Angular Material MatSortable

angular-material2

angular