Mat Sort 仅对某些 rows/columns 进行排序

Question

我在垫子标签内有一个垫子 table。我的 table 中有列，垫排序仅对前两行进行排序。 (dateOpened, dateClosed, orderNumber, invoiceNumber, purchaseOrderNumber) 所有这些列都是字符串类型。我拥有的其他专栏排序非常好。

table component.html

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

  <ng-container matColumnDef="caseNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header class="medium"> {{ 'COLUMNS.caseNumber' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row" class="medium">
      <span class="mobile-label">{{ 'COLUMNS.caseNumber' | translate }}: </span>
      <a class="hover-underline-animation" (click)="openCaseModal(row)">{{ row.caseNumber }}</a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="dateOpened">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.dateOpened' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.dateOpened' | translate }}: </span>
      {{ row.dateCreated | date: 'MM/dd/yyyy' }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="caseTitle">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.caseTitle' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.caseTitle' | translate }}: </span>
      {{ row.caseTitle }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="functionalGroupName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.functionalGroupName' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.functionalGroupName' | translate }}: </span>
      {{ row.functionalGroup }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="accountName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.accountName' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.accountName' | translate }}: </span>
      {{ row.account }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="contactName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.contactName' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.contactName' | translate }}: </span>
      {{ row.primaryContact }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="statusReasonName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.statusReasonName' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.statusReasonName' | translate }}: </span>
      {{ row.statusReason }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell class="large" *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.description' | translate }} </mat-header-cell>
    <mat-cell class="large" *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.description' | translate }}: </span>
      <span 
        class="description"
        matTooltip="{{ row.description }}"
        matTooltipClass="tooltip">
        {{ row.description }}
      </span>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="dateClosed">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.dateClosed' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.dateClosed' | translate }}: </span>
      {{ row.dateClosed | date: 'MM/dd/yyyy' }}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="orderNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.orderNumber' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <a *ngIf="row.originalOrder" [href]="createUrl('/order/', row.originalOrder)">{{ row.originalOrder }}</a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="invoiceNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.invoiceNumber' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <a *ngIf="row.originalOrder" [href]="createUrl('/invoice/', row.invoice)">{{ row.invoice }}</a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="purchaseOrderNumber">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.purchaseOrderNumber' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <a *ngIf="row.originalOrder" [href]="createUrl('/po/', row.po)">{{ row.po }}</a>
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="productSeriesName">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.productSeriesName' | translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.productSeriesName' | translate }}: </span>
      {{ row.productSeriesName }}
    </mat-cell>
  </ng-container>

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

</mat-table>

table component.ts 在 ngOnChanges()

中调用了 setupTable()

private sort: MatSort;

@ViewChild(MatSort) set matSort(ms: MatSort) {
 this.sort = ms;
 this.setDataSourceAttributes();
}

setDataSourceAttributes() {
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
}
setUpTable(data) {
 this.loading = true;
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
 //logic to populate data tables from @Inputs vars
}

我很难找出在对这 4 个特定列进行排序时发生错误的位置。此外，这 4 列的排序仅发生在前两行，而其他列的过滤完全正常。

任何 help/tips 将不胜感激。

Answer 1

我发现我的问题出在 matColumnDef 和 matCellDef 中显示的数据中。这些需要匹配。例如：

<ng-container matColumnDef="dateOpened">
 <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.dateOpened' | 
   translate }} </mat-header-cell>
 <mat-cell *matCellDef="let row">
  <span class="mobile-label">{{ 'COLUMNS.dateOpened' | translate }}: </span>
  {{ row.dateCreated | date: 'MM/dd/yyyy' }}
 </mat-cell>
</ng-container>

需要：

  <ng-container matColumnDef="dateCreated">
    <mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'COLUMNS.dateOpened' | 
     translate }} </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <span class="mobile-label">{{ 'COLUMNS.dateOpened' | translate }}: </span>
      {{ row.dateCreated | date: 'MM/dd/yyyy' }}
    </mat-cell>
  </ng-container

row.dateCreated 现在匹配 matColumnDef 并且错误已修复。

旁注我仍然注意到相同的行为，其中只有前两行对列进行排序，当所有值都相同时，甚至与 matColumnDef 的匹配值和 matCellDef。因此，如果有人能阐明这一点，我们将不胜感激。

Mat Sort 仅对某些 rows/columns 进行排序

Mat Sort only sorting for certain rows/columns

angular-material2

angular