角度材质排序标题不会将空值排序到末尾

Question

我遵循angular material sort header example向我的标题on this page添加排序函数，但是我发现在asc sort中，该示例无法将null或未定义的对象放在结尾。我试图进行改进，但是sortData（）中的console.log在真实列表“ n / a”中仍然显示在正确的顺序中。

更多详细信息：对所有标头进行asc排序后，您都可以在浏览器开发人员工具中找到排序结果，并且所有null / 0 / undefined都已正确排序到末尾，但是我不知道为什么在html中它们仍然存在在前面。这是我所做的：

在component.ts中：

export class GamelistComponent implements OnInit {
  games: MatTableDataSource<Game>;
  ...
  sortData(sort: Sort) {
    const data = this.games.data.slice();
    if (!sort.active || sort.direction === '') {
      this.games.data = data;
      return;
    }
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'min_price': this.games.data = data.sort((a, b) => compare(a.min_price, b.min_price, isAsc)); break;
      case 'vs_price': this.games.data = data.sort((a, b) => compare(a.vs_price, b.vs_price, isAsc)); break;
      case 'dsc': this.games.data = data.sort((a, b) => compare(a.dsc, b.dsc, isAsc)); break;
      case 'avr': this.games.data = data.sort((a, b) => compare(a.avr, b.avr, isAsc)); break;
      case 'score': this.games.data = data.sort((a, b) => compare(a.score, b.score, isAsc));
    }
    // **YOU CAN SEE THE SORT RESULT IN DEVELOPER TOOLS**
    console.log(this.games.data); 
    // **YOU CAN SEE THE SORT RESULT IN DEVELOPER TOOLS**
  }
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
  if (a && b) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  } else if (a) {
    return -1;
  } else {
    return 1;
  }
}

在component.html中：

<div [hidden]="!games" class="gamelist">
    <table mat-table [dataSource]="games" matSort matSortDisableClear (matSortChange)="sortData($event)">
      <ng-container matColumnDef="title">
        <th class="gamelist-header-search" mat-sort-header="title" mat-header-cell *matHeaderCellDef disabled>
          <mat-form-field floatLabel="never" fxHide.lt-sm>
            <mat-label>Search Games ...</mat-label>
            <input matInput (keyup)="applyFilter($event.target.value, 'title')" placeholder="">
          </mat-form-field>
          <span fxHide.gt-xs>Games</span>
        </th>
        <td mat-cell *matCellDef="let game"><span *ngIf="game.title else natitle">{{game.title}}</span><ng-template #natitle><span class="na">n/a</span></ng-template></td>
      </ng-container>
      <ng-container matColumnDef="min_price">
        <th class="gamelist-header" mat-sort-header="min_price" mat-header-cell *matHeaderCellDef>Min<span fxHide.lt-sm>({{currentCurrency}})</span></th>
        <td class="gamelist-nums" mat-cell *matCellDef="let game"><span *ngIf="game.min_price else naprice">{{game.min_price | currency:currentCurrency}}</span><span class="flag-icon" [ngClass]="'flag-icon-' + game.min_area | lowercase" title={{game.min_area}} ></span><ng-template #naprice><span class="na">n/a</span></ng-template></td>
      </ng-container>
      ...
      <tr mat-header-row  *matHeaderRowDef="listColumns; sticky: true;"></tr>
      <tr mat-row *matRowDef="let row; columns: listColumns;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[20,50,100]" showFirstLastButtons></mat-paginator>
  </div>

有人知道为什么吗？谢谢。