角度材料表:排序不起作用

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材料数据表排序不起作用

Answer 2

确保在displayColumns数组中的column_name，

displayColumns = [' column_name '];

html容器，

ng-container matColumnDef =“ column_name ”

以及dataSource对象的键，

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

完全匹配。

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