MARGEN

 <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>

MECANOGRAFIADA

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

TUBO

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

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

OBJETO

enter image description here

PREGUNTA

En una aplicación IONIC, estoy tratando de ordenar de mayor a menor por el número de casos activos, pero la tubería que hice no resuelve el problema.

¿Alguien puede mostrarme el camino correcto?

0
André Castro 27 ago. 2020 a las 15:55

2 respuestas

La mejor respuesta

Su función OrderByPipe toma un argumento adicional que es la función pasada a sort, mirando su código, esa función nunca se pasa, debe definir dicha función en su componente y luego pasarla a la tubería como un argumento, como se demuestra a continuación:

Componente:

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

Plantilla:

<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>
0
Rafi Henig 27 ago. 2020 a las 13:11

Si tiene que ordenar en varios lugares en su aplicación, entonces se recomienda Pipe , pero aquí puede hacerlo agregando un nuevo método.

Intente cambiar su código como se muestra a continuación,

 ...

   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;
}

Codificación feliz .. :)

0
ganesh045 27 ago. 2020 a las 13:21