web-dev-qa-db-ja.com

Angularマテリアルテーブル：並べ替えが機能しない

私の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';

最初のケースではソートが機能するのに、2番目のケースでは機能しない理由がわかりません。誰かがここで何が起こっているのか考えがありますか？

angularsortinghtml-tableangular-material
3
Tommy

表示されたColumns配列のcolumn_nameであることを確認してください。

displayColumns = ['column_name'];

htmlコンテナ、

ng-container matColumnDef = "column_name"

およびdataSourceオブジェクトのキー、

dataSource = [{"column_name"： "value"}];

すべてが完全に一致します。

これは、特定のデータセットが機能せず、他のデータセットが機能する理由でもあります。

8
Naser AlOqab

2番目のテーブル（ソートが機能していないテーブル）が* ngIfでdivにラップされていないことを確認しますか？これは一般的な問題であるため、テンプレートがレンダリングされるときのように、* ngIfのため、matSortは未定義です。これを修正する方法は次のとおりです： Angular 5 Material Data Tableの並べ替えが機能しない

8
wFitz

データ型が混在していると思われる場合、ソートが機能しないことはわかっています。したがって、以下のリストでは、587に到達すると、[値]列の並べ替えが停止します。
enter image description here

0
JBrooks