сортировка не работает должным образом угловой 4

Question

У меня есть различные таблицы, и я пытаюсь отсортировать таблицу, используя https://www.npmjs.com/package/ngx-order-pipe. Я следовал их документации и все работает нормально, за исключением того, что неправильно сортирует столбцы (здесь, в примере, столбец «Ранг»)

Например, у меня есть такой ответ:

"collection": [
            {
                "name": "John",
                "age" : "25",
                "details": [
                    {
                        "final_rank": "150"
                    }
                ]
            }
        {
                "name": "Mark",
                "age" : "19",
                "details": [
                    {
                        "final_rank": "254"
                    }
                ]
            }

Вот мой HTML:

    <table>
      <thead>
        <tr>
          <th (click)="setOrder('name')">Name</th>
          <th (click)="setOrder('age')">Age</th>
          <th (click)="setOrder('final_rank')">Rank</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let Data of collection | orderBy: order:reverse:'case-insensitive'">
          <td class="text-truncate">{{Data.name}}</td>
          <td class="text-truncate">{{Data.age}}</td>
          <td class="text-truncate" *ngIf="!isArray(Data.details)">
            <tr> {{Data.details.final_rank}} </tr>
          </td>
          <td class="text-truncate" *ngIf="isArray(Data.details)"><tr *ngFor="let rankData of Data.details"> {{rankData.final_rank}} </tr></td>
       </tr>
     </tbody>
   </table>

component.ts

  order;
  reverse = false;

  isArray(obj: any) {
    return Array.isArray(obj)
  }
  getData() {
    this.http.get('**')
      .subscribe(data => {
        console.log(data);
      });
  }
      setOrder(value) {
         if (this.order === value) {
           this.reverse = !this.reverse;
         }
         this.order = value;
         console.log(this.order);
       }

Answer 1

Кажется, ваша проблема в том, что вы пытаетесь отсортировать по полю, которое находится внутри массива фактического объекта. Я подозреваю, что ваша библиотека не знает, как сделать сортировку (и это, вероятно, правильно). Поэтому вам нужно преобразовать данные в формат, в котором они могут быть отсортированы.

В какой-то момент в вашем приложении у вас есть данные:

const originalData = [{
  'name': 'John',
  'age': '25',
  'details': [
    {
      'final_rank': '150'
    }
  ]
},
{
  'name': 'Mark',
  'age': '19',
  'details': [
    {
      'final_rank': '254'
    }
  ]
}];

Что вы хотите сделать сейчас - это взять эти данные и преобразовать их во что-то еще. В этом примере я хочу получить максимальное final_rank значение любого из details элементов. Это максимальное значение будет использоваться для сортировки. Возможно, вы захотите использовать другой способ определения того, какое значение использовать, но для этого примера максимальное значение должно подойти.

Мы можем использовать функцию карты для преобразования каждого значения ваших исходных данных:

const mappedData = originalData.map(item => ({
  // This will do a shallow copy of all the fields of the original object
  ...item,
  // With reduce we can easily find the max ```final_rank``` value
  maxRank: item.details.reduce(
    // +current.final_rank converts the string to a number
    (max, current) => +current.final_rank > max ? current.final_rank : max,
    0
  )
}));

Это должно привести к новому массиву, который должен выглядеть так же, как ваши исходные данные, за исключением дополнительного поля maxRank в корневом объекте.

Полученный объект будет выглядеть примерно так:

const mappedData = [{
  'name': 'John',
  'age': '25',
  'maxRank': 150,
  'details': [
    {
      'final_rank': '150'
    }
  ]
},
{
  'name': 'Mark',
  'age': '19',
  'maxRank': 254,
  'details': [
    {
      'final_rank': '254'
    }
  ]
}];

Теперь вы сможете выполнять сортировку по полю maxRank.