Question

我已经用尽了所有示例，文档等。我已经使用了角度表三年了，即使在应用程序中我也遇到了这个问题，但我有其他表在使用sort时也没有问题。我一直在比较它们，但我不知道两者之间的区别。

  dataSource: MatTableDataSource<IOrder>;
  @ViewChild(MatSort, { static: true }) sort: MatSort;
  @ViewChild('mainTable', { static: false }) table: MatTable<IOrder>;

然后，当数据通过store / http调用等到达时：

          this.dataSource = new MatTableDataSource(orders);
          this.dataSource.sort = this.sort;
          this.ref.detectChanges();
          this.table.renderRows();

在前端：

<table
        matSort
        class="table"
        mat-table
        multiTemplateDataRows
        [dataSource]="dataSource"
        #mainTable
      >

及其定义：

        <tr mat-header-row *matHeaderRowDef="activeColumns; sticky: true"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: activeColumns; let i = index"
        ></tr>

，然后是实际行的示例：

<ng-container matColumnDef="UPRN">
          <th
            class="table-header"
            mat-header-cell
            *matHeaderCellDef
            mat-sort-header="UPRN"
          >
            UPRN
          </th>
          <td class="table-cell" mat-cell *matCellDef="let row">
            {{ row.site.UPRN }}
          </td>
        </ng-container>

我也为createdAt设置了一个，这是相同的。

一切似乎都已正确定义，并且任何地方都没有错误。

如果我在控制台上登录席子排序，则可以在“条目”中看到所有正确的行/列。

Answer 1

如果一切都正确导入，我认为它不起作用是因为它正在寻找row.UPRN而不是row.site.UPRN，因为您定义了mat-sort-header="UPRN" 请尝试执行自定义排序逻辑，例如

https://stackblitz.com/edit/angular-1urgk9

我希望这可以帮助您解决问题

Answer 2

实际起作用的是提供一个带有开关箱的函数作为dataSource.sortingDataAccessor属性的值，如下所示：

          this.dataSource.sortingDataAccessor = (item, property) => {
            switch (property) {
              case 'UPRN':
                return item.site.UPRN;
              case 'Status':
                return item.status;

              case 'Updated at': {
                return item.updatedAt;
              }
              case 'Updated By': {
                return item.updatedByFriendly;
              }
              case 'Created by': {
                return item.createdByFriendly;
              }
              default: {
                return item[property];
              }
            }
          };

Intellisense还可以帮助您提供可用的属性。大小写字符串必须与您作为列定义提供的字符串相同。

Mat Sort标头不对数据进行排序

2 个答案: