垫排序仅对某些行/列进行排序

Question

我在垫子标签内有一个垫子表。我的表中有列，垫子仅对前两行进行排序。 （dateOpened，dateClosed，orderNumber，invoiceNumber，purchaseOrderNumber）所有这些列均为字符串类型。我的其他列排序都很好。

表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>

表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列的排序仅发生在前两行，而其他列则完全过滤。

任何帮助/提示将不胜感激。

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匹配的值。因此，如果有人能对此有所了解，将不胜感激。