Заголовок Angular Material Sort не сортирует нулевые значения до конца

Question

Я следовал пример заголовка угловой сортировки материала , чтобы добавить функцию сортировки к моему заголовку на этой странице , но я обнаружил, что в сортировке asc пример не может иметь значение null или undefinedобъекты до конца.Я пытался улучшить его, но console.log в sortData () показывал правильный порядок, в то время как в реальном списке «n / a» все еще впереди.

Подробнее: После того, как вы отсортируете любой заголовок, выМожно найти отсортированный результат в инструменте разработчика браузера, и все 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>

Кто-нибудь знает почему?Спасибо.