javascript - Angular 6 Sorter array av objekter etter dato

Jeg prøver å sortere array-objektet etter dato for min Angular 6-applikasjon. Dataene har strengformat. Jeg lurer på om det finnes en eksisterende modul for å utføre sortering i Angular, eller om vi må lage sorteringsfunksjonen i Typescript.

Angular-mal

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

Arrayet

[
  {
    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",
  }
]

Svar #1

For nyeste først:

this.data.sort((a, b) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

For EldreFørst:

this.data.sort((b, a) => new Date(b.date1).getTime() - new Date(a.date1).getTime());

Svar #2

Du kan bruke Array.sort for å sortere data.

Jeg har laget en demo på Stackblitz. Jeg håper dette vil hjelpe/guide deg/andre.

komponent.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);
    });
  }

komponent.html

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

Svar #3

du kan bruke sort-funksjonen for arrays, den tar inn en sammenligningsfunksjon. Analyser dato-strengen til et datoobjekt og sorter etter det.

les mer om her

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

Stigende

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

Synkende

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

Svar #4

I tillegg til Cryptics svar vil du sannsynligvis ønske å pakke de sorterte verdiene inn i en accessor for inkludering i malen, ved å legge til en getter i TypeScript-klassen din:

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

og i malen:

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

Alternativt kan du sortere arrayet når du får det inn i komponentklassen din og lagre den sorterte versjonen der, men aksessormønsteret kan være ganske nyttig for dynamisk sortering.

Relaterte artikler