Saltar al contenido

Angular 6 Ordenar matriz de objeto por fecha

Solución:

Puedes usar Array.sort para ordenar datos.

He creado una demostración en Stackblitz. Espero que esto ayude / guíe a usted / a otros.

componente.ts

  data = [
    {
      CREATE_TS: "2018-08-15 17:17:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:25:30.0",
      Key1: "Val1",
      Key2: "Val2",
    },
    {
      CREATE_TS: "2018-08-15 17:28:30.0",
      Key1: "Val1",
      Key2: "Val2",
    }
  ]

  get sortData() {
    return this.data.sort((a, b) => {
      return <any>new Date(b.CREATE_TS) - <any>new Date(a.CREATE_TS);
    });
  }

componente.html

<div *ngFor="let item of sortData">
  {{item.Key1}} -- {{item.CREATE_TS}} 
</div>

puedes usar el sort función para matrices, toma la función de comparación. Analice la cadena de fecha en un objeto de fecha y ordene por ella.

leer más sobre aquí

var myArr = [


{
    CREATE_TS: "2018-08-15 17:17:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:25:30.0",
    Key1: "Val1",
    Key2: "Val2",
  },
  {
    CREATE_TS: "2018-08-15 17:28:30.0",
    Key1: "Val1",
    Key2: "Val2",
  }
]
myArr.sort((val)=> {return new Date(val.CREATE_TS)})

Ascendente

myArr.sort((val1, val2)=> {return new Date(val1.CREATE_TS) - new 
Date(val2.CREATE_TS)})

Descendiendo

myArr.sort((val1, val2)=> {return new Date(val2.CREATE_TS) - new 
Date(val1.CREATE_TS)})

Además de la respuesta de cryptic, es probable que desee envolver los valores ordenados en un descriptor de acceso para incluirlos en la plantilla, agregando un captador en su clase de mecanografiado:

public get sortedArray(): YourItemType[] {
    return this.myArr.sort(...);
}

y en la plantilla:

<app-item *ngFor="let item of sortedArray"></app-item>

alternativamente, puede ordenar la matriz a medida que la ingresa en su clase de componente y almacenar la versión ordenada allí, sin embargo, el patrón de acceso puede ser bastante útil para la ordenación dinámica.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *