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值。该最大值将用于排序。您可能希望使用另一种方法来定义要使用的值，但对于此示例，最大值应该可以。

我们可以使用map函数转换原始数据的每个值：

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字段进行排序。

排序不正常角度4

1 个答案: