javascript - Angular 6 Sortera en array av objekt efter datum

Jag försöker sortera array-objektet efter datum för min Angular 6-applikation. Datat har strängformat. Jag undrar om det finns en befintlig modul för att utföra sortering i Angular eller om vi måste bygga sorteringsfunktionen i Typescript.

Angular-mall

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

Arrayen

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

För de senaste först:

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

För ÄldreFörst:

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

Svar #2

Du kan använda Array.sort för att sortera data.

Jag har skapat en demo på Stackblitz. Jag hoppas att detta kommer att hjälpa/vägleda dig/andra.

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 använda sort-funktionen för arrayer, den tar en jämförelsefunktion. Parsadated strängen till ett datumobjekt och sortera efter det.

läs mer om här

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

Uppåtgående

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

Nedstigande

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

Svar #4

förutom Cryptics svar, kommer du sannolikt att vilja omsluta de sorterade värdena i en accessor för att inkludera dem i mallen, genom att lägga till en getter i din Typescript-klass:

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

och i mallen:

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

Alternativt kan du sortera arrayen när du får den till din komponentklass och lagra den sorterade versionen där, men åtkomstmönstret kan vara ganska användbart för dynamisk sortering.

Relaterade artiklar