Angular - показывать пустые значения внизу таблицы

Question

Я использую ngx-order-pipe для сортировки таблицы, как показано ниже. Я могу отсортировать таблицу с данными, которые содержат нулевые значения в поле возраста. Когда я сортирую Ascending или Descending, значения Null появляются внутри сортировки. У меня вопрос, есть ли способ исправить нулевые значения, чтобы они всегда отображались внизу таблицы, независимо от сортировки по возрастанию или по убыванию? Пожалуйста, смотрите код ниже:

app.component. html

<div>
    <table>
        <thead>
            <tr>
                <th [class.active]="order === 'id'" (click)="setOrder('id')">
                    ID <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span>
                </th>
                <th [class.active]="order === 'info.name'" (click)="setOrder('info.name')"
                    class="mdl-data-table__cell--non-numeric">
                    Name <span [hidden]="reverse">▼</span><span [hidden]="!reverse">▲</span>
                </th>
                <th [class.active]="order === 'info.number'" (click)="setOrder('info.number')">
                    Phone number <span [hidden]="reverse">▼</span>
                    <span [hidden]="!reverse">▲</span>
                </th>
                <th [class.active]="order === 'info.age'" (click)="setOrder('info.age')">
                    Age <span [hidden]="reverse">▼</span>
                    <span [hidden]="!reverse">▲</span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of collection | orderBy: order:reverse:'case-insensitive'">
                <td>{{ row.id }}</td>
                <td>{{ row.info.name }}</td>
                <td>{{ row.info.number }}</td>
                <td>{{ row.info.age }}</td>
            </tr>
        </tbody>
    </table>
</div>

app.component.ts

export class AppComponent {
  order: string = "info.name";
  reverse: boolean = false;
  collection: any[] = [
    {
      id: 1,
      info: {
        name: "john",
        number: "555-1212",
        age: 10
      }
    },
    {
      id: 5,
      info: {
        name: "Mary",
        number: "555-9876",
        age: null
      }
    },
    {
      id: 2,
      info: {
        name: "Mike",
        number: "555-4321",
        age: 21
      }
    },
    {
      id: 3,
      info: {
        name: "Julie",
        number: "555-8765",
        age: 29
      }
    },
    {
      id: 4,
      info: {
        name: "Adam",
        number: "555-5678",
        age: null
      }
    }
  ];
  sortedCollection: any[];

  constructor(private orderPipe: OrderPipe) {
    this.sortedCollection = orderPipe.transform(this.collection, "info.name");
    console.log(this.sortedCollection);
  }

  setOrder(value: string) {
    if (this.order === value) {
      this.reverse = !this.reverse;
    }

    this.order = value;
  }
}

Answer 1

(не тестировалось). Вы можете использовать пользовательский компаратор .

customComparator(itemA, itemB) {
    if (itemA === null) {
        return 1; // or 1 when using reverse
    } else if (itemB === null) {
        return -1; // or -1 when using reverse
    }
    return itemA > itemB ? 1 : -1;
}