Angular Material - 垫表排序行

Posted

技术标签:

【中文标题】Angular Material - 垫表排序行【英文标题】:Angular Material - mat-table sort row 【发布时间】:2021-01-23 11:54:37 【问题描述】:

如何根据行对角材料垫表进行排序?我知道我们可以使用mat-sort根据列进行排序,但要求是双击时根据行进行排序。

<ng-container matColumnDef="Measure">
  <th mat-header-cell *matHeaderCellDef>Measure</th>
  <td mat-sort-header class="bold" mat-cell *matCellDef="let element">
       element.name 
  </td>
</ng-container>

将 mat-sort-header 指令添加到 td 而不是 th,但出现错误 - 不能有两个具有相同 id (Measure) 的 MatSortables。

【问题讨论】:

找到解决方案了吗? 【参考方案1】:

mat-sort-header 添加到&lt;th&gt; 而不是&lt;td&gt;

我今天也遇到了这个问题,只是一个愚蠢的错误。

【讨论】:

【参考方案2】:

我有:

displayedColumns: string[] = [
'guest-name',
'rental-name',
'check-in',
'check-out',
'check-in',
'guests',
'total',
'arrival-time',

]

注意 签入 被重复两次,导致以下错误:

“不能有两个具有相同 id 的 MatSortables”

【讨论】:

【参考方案3】:

您可以使用Material CDK-Table 并设置您想要的任何类型的排序。查看来自官方docs的示例:

<table matSort (matSortChange)="sortData($event)">
   ....
</table>



sortData(sort: Sort) 
const data = this.desserts.slice();
if (!sort.active || sort.direction === '') 
  this.sortedData = data;
  return;


this.sortedData = data.sort((a, b) => 
  const isAsc = sort.direction === 'asc';
  switch (sort.active) 
    case 'name': return compare(a.name, b.name, isAsc);
    case 'calories': return compare(a.calories, b.calories, isAsc);
    case 'fat': return compare(a.fat, b.fat, isAsc);
    case 'carbs': return compare(a.carbs, b.carbs, isAsc);
    case 'protein': return compare(a.protein, b.protein, isAsc);
    default: return 0;
  
);

【讨论】:

以上是关于Angular Material - 垫表排序行的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 - 路由未发生 - 垫表行

Angular Material 中的默认排序 - 排序标题

如何使角垫表中的排序箭头始终可见?

Angular Material 表的问题 - 分页和排序

可重复使用的角材料垫表

Angular Material 2 DataTable 使用嵌套对象排序