Angular 对对象中的项目进行排序

Question

标记

 <ion-content>
    <ion-list *ngFor="let todosPaises of crossCountriesData">
        <ion-item lines="inset" *ngFor="let dados of todosPaises.response | orderBy">
            {{ dados.cases.active }}
        </ion-item>
    </ion-list>
</ion-content>

打字

this.crossCountries = this.api.getCrossCountries();
        this.crossCountries.forEach(item => {
            this.crossCountriesData.push(item);
            console.log('my data: ', this.crossCountriesData);
        });

管道

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "orderBy"
})
export class OrderByPipe implements PipeTransform {
  transform(value: object[], sortFunction?: any): any[] {
    return value.sort(sortFunction);
  }
}

对象

问题

在 IONIC 应用程序中，我尝试按活动案例数从大到小排序，但我制作的管道无法解决问题。

谁能告诉我正确的方法？

Answer 1

你的 OrderByPipe 函数有一个额外的参数是传递给 sort 的函数它作为参数传给管道，如下所示：

分量：

public orderByMethod = (x, y) => y.cases.active - x.cases.active;

模板：

<ion-content>
  <ion-list *ngFor="let todosPaises of crossCountriesData">
    <ion-item lines="inset"
      *ngFor="let dados of todosPaises.response | orderBy : orderByMethod">
      {{ dados.cases.active }}
    </ion-item>
  </ion-list>
</ion-content>

Answer 2

如果您必须在应用程序的多个位置进行排序，那么建议使用 Pipe，但在这里您可以通过添加新方法来实现。

尝试像下面这样更改您的代码，

 ...

   this.crossCountries = this.api.getCrossCountries();
    sortData('activeCases');
}    

sortData(value: string) {
  this.crossCountries.sort((a: any, b: any) => {
        if (a[value] < b[value]) {
            return -1;
        } else if (a[value] > b[value]) {
            return 1;
        } else {
            return 0;
        }
    });
  this.crossCountriesData = this.countriesData;
}

快乐编码..:)

Angular 对对象中的项目进行排序

Angular sort items in object

angular

typescript

sorting

pipe

ngfor