Question

在我的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';

我不明白为什么排序在第一种情况下有效，而在第二种情况下无效。有人有什么想法吗？

Answer 1

您确定您的第二张表（不能进行排序的那张表）没有用* ngIf包裹在div中吗？因为这是一个常见问题，如呈现模板时一样，由于* ngIf，matSort是未定义的。解决方法如下：Angular 5 Material Data Table sorting not working

Answer 2

确保在displayColumns数组中的 column_name ，

displayedColumns = ['列名'];

html容器，

ng容器matColumnDef =“ column_name ”

和dataSource对象的键，

dataSource = [{“ column_name ”：“ value”}];

完全匹配。

这也可能是一组特定数据无法正常工作而其他数据却无法正常工作的原因。

Answer 3

当我认为我混入数据类型时，我知道我的排序不起作用。因此，在下面的列表中，当到达587时，它将停止对“值”列进行排序。

Answer 4

还有另一个可能的问题。除了列名称必须与“ mat-header-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

Answer 5

用于使用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 个答案: