angular - Angular Material 中带有嵌套对象的默认排序

标签 angular angular-material

我使用带排序的 mat 表,我想在其中对特定列设置默认排序。

这适用于普通属性但不适用于嵌套属性。

这是我的 table

<table mat-table [dataSource]="dataSource" multiTemplateDataRows 
       matSort matSortActive="break" matSortDirection="asc"
       class="mat-elevation-z4 w-100">

我的嵌套排序

this.dataSource.sort = this.sort;
   this.dataSource.sortingDataAccessor = (item, property) => {
   switch(property) {
      case 'break': return item.break.start;
      default: return item[property];
   }
};

此外,这种嵌套排序很好,当您手动单击标题进行排序时,它会按照我的预期进行,但默认情况下它不会排序,只显示排序箭头。

这就是它在页面加载时的样子:

这里是对应的stackblitz .

最佳答案

我在 5 月份研究时,初始排序无法正常工作。

在我的例子中,有必要编写我自己的 setSortHeader 函数,该函数在获取数据后执行。

setSortHeader() {
  this.sort.active = 'break';
  this.sort.direction = 'desc';
  this.sort.sortChange.emit({ active: this.sort.active, direction: this.sort.direction });

  const sortHeader = this.sort.sortables.get('break');
  if (sortHeader) sortHeader['_setAnimationTransitionState']({ toState: 'active' });
}

我不确定此代码是否仍然必要,但在我的情况下有效。

关于angular - Angular Material 中带有嵌套对象的默认排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58322447/

相关文章:

Angular 2 : Route data is undefined on page refresh

angular - 如何根据对象以 Angular 选择表格行?

angular - 如何在 Angular 2 的 Material 选择框中显示 md 错误?

javascript - 有没有办法在没有样式的情况下使用 Angular Material?

angular - Angular 中的深度复制对象

javascript - 在 Angular 组件模板中添加脚本标签

javascript - 滚动后导航到链接时如何不突出显示每个链接?

javascript - 电话号码格式的正则表达式(不超过 10 位数字),不接受 0 或 1 作为第一个数字

angular - 为 Angular Material Table 创建可重用组件并更改其表标题

angular - 来自 v14 的 Angular Material v15 主题如何工作