角材料表：排序不起作用

Posted 2023-03-05

【中文标题】角材料表：排序不起作用

【英文标题】：Angular Material Table: Sorting not working

【发布时间】：2019-01-28 02:33:58

【问题描述】：

在我的 Angular 应用程序（使用 Angular Material）中，我有几个表格。

奇怪的是，在一种情况下，排序工作，而在另一种情况下，它却没有。

这是有效的表格：

<table mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let row"> row.id </td>
  </ng-container>

  <ng-container matColumnDef="firstName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name </th>
    <td mat-cell *matCellDef="let row"> row.firstName </td>
  </ng-container>

  <ng-container matColumnDef="lastName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </th>
    <td mat-cell *matCellDef="let row"> row.lastName </td>
  </ng-container>

  <ng-container matColumnDef="viewProfile">
    <th mat-header-cell *matHeaderCellDef class="viewProfile"> Profile </th>
    <td mat-cell *matCellDef="let row" class="viewProfile">
      <button mat-icon-button (click)="openProfile(row.id)">
                <mat-icon aria-label="icon-button with a page-view icon">pageview</mat-icon>
              </button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

...这是不起作用的表：

<table class="table2" mat-table [dataSource]="dataSource2" matSort>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Project </th>
    <td mat-cell *matCellDef="let row"> row.name </td>
  </ng-container>
  <ng-container matColumnDef="role">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th>
    <td mat-cell *matCellDef="let row"> row.role </td>
  </ng-container>
  <ng-container matColumnDef="beginning">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Beginning </th>
    <td mat-cell *matCellDef="let row"> row.beginning | date : "mediumDate" </td>
  </ng-container>
  <ng-container matColumnDef="end">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> End </th>
    <td mat-cell *matCellDef="let row"> row.end | date : "mediumDate" </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns2"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns2;"></tr>
</table>

如您所见，在这两种情况下，我都使用“matSort”（在table 标记中）和“mat-sort-header”（用于应该可排序的列）。

此外，在每种情况下，我都会在 component.ts 文件中进行相同的导入：

import  MatTableDataSource, MatPaginator, MatSort, MatDialog  from '@angular/material';

我只是不明白为什么排序在第一种情况下有效，但在第二种情况下无效。 有人知道这里发生了什么吗？

【问题讨论】：

您使用的是哪个版本的 Angular Material？

你的数据源支持排序吗？你能发布 plunkr 吗？

我正在使用 Angular Material 6

第二种情况下的数据源除了字符串之外还包含两个日期...这可能是原因吗？

【参考方案1】：

确保显示的Columns数组中的column_name，

displayedColumns = ['column_name'];

html 容器，

ng-container matColumnDef="column_name"

以及数据源对象的键，

dataSource = [ "column_name": "value" ];

完美匹配。

这也可能是特定数据集不起作用而其他数据起作用的原因。

【讨论】：

我遇到了同样的问题。此解决方案有效。确保列名和 columnDef 相同。

【参考方案2】：

你确定你的第二张表（排序不工作的那个）没有用 *ngIf 包裹在一个 div 中吗？因为这是一个常见问题，当渲染模板时，由于 *ngIf，matSort 是未定义的。以下是解决方法：Angular 5 Material Data Table sorting not working

【讨论】：

感谢您的建议回答...该表包含在几个 div 中，但这些 div 中没有一个包含 *ngIf

感谢您的建议回答

【参考方案3】：

还有另一个可能的问题。 除了列名必须匹配 'mat-h​​eader-row *matHeaderRowDef' 中的属性 'matHeaderRowDef' 之外，列名还必须匹配 dataSource 属性中使用的内容类型的类字段/属性名称。

例如

<mat-table [dataSource]="mySource" matSort>
        <!-- modelViewFieldNameOne has to match the class field/property name! -->
        <ng-container matColumnDef="modelViewFieldNameOne">
            <mat-header-cell  *matHeaderCellDef
                             mat-sort-header>just a column</mat-header-cell>
            <mat-cell *matCellDef="let tableItem"> tableItem.getterForMyField </mat-cell>
        </ng-container>


// typescript where 'mySource' is kept
mySource = new MatTableDataSource<MyModelViewType>();


// typescript of MyModelViewType
export class MyModelViewType

   // this is important, it has to match the ng-container matColumnDef attribute!!!
   private modelViewFieldNameOne

   // this getter naming is not important for mat-table attributes
   public get getterForMyField(): string  
     return this.modelViewFieldNameOne;
   

我的 mat-table 排序很好，直到模型视图类型（即上面示例中的 MyModelViewType）被重构，但只有字段/属性名称发生变化，getter() 名称被保留，相应的表列停止正确排序。一旦属性与名称匹配，它就会再次起作用。

我正在使用： @angluar/cdk 9.2.2

【参考方案4】：

对于使用 API 调用加载的数据：

排序可能是在数据加载到表之前设置的；从而破坏了排序功能。

---

在这种情况下，改变：

** code to insert data into the table **

this.dataSource2.sort = this.sort;

到

** code to insert data into the table **

setTimeout(() => this.dataSource2.sort = this.sort, 2000); // Delay it by 2 seconds.

---

this.sort 在哪里：

@ViewChild(MatSort,  static: false ) sort: MatSort;

【参考方案5】：

我知道当它认为我混合了数据类型时，我的排序不起作用。所以在下面的列表中，当它到达 587 时，它将停止对 Value 列进行排序。