wake-up-neo.com

Angular 6 Sortiere das Objekt nach Datum

Ich versuche, das Array-Objekt nach Datum für meine Anwendung Angular 6 zu sortieren. Die Daten haben ein String-Format. Ich frage mich, ob es ein vorhandenes Modul gibt, um in Angular eine Sortierung durchzuführen, oder wir müssen eine Sortierfunktion in TypeScript erstellen.

Eckige Vorlage

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

Das Array

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

sie können die sort-Funktion für Arrays verwenden, die Vergleichsfunktion übernimmt. Analysieren Sie die Date-Zeichenfolge in ein Datumsobjekt und sortieren Sie sie danach.

lesen Sie mehr über hier

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

Aufsteigend

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

Absteigend

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

neben der Antwort von Cryptic möchten Sie wahrscheinlich die sortierten Werte in einen Accessor einschließen, der in die Vorlage eingefügt werden soll, und einen Getter in Ihre TypeScript-Klasse einfügen:

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

und in der Vorlage:

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

alternativ können Sie das Array sortieren, wenn Sie es in Ihre Komponentenklasse aufnehmen, und die sortierte Version dort speichern. Das Zugriffsmuster kann jedoch für das dynamische Sortieren sehr nützlich sein.

6
derelict

Sie können Array.sort für Sortierdaten verwenden.

Ich habe eine Demo zu Stackblitz erstellt. Ich hoffe, dass dies Ihnen/anderen helfen wird.

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

komponente.html

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

Für den letzten zuerst:

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

Für OlderFirst:

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

Mit dieser Methode in TypeScript können Sie Datumswerte in beliebiger Reihenfolge sortieren. Sie können auch andere Datentypen wie Zahl oder Zeichenfolge sortieren, indem Sie einfach die neuen Date () - und getTime-Methoden entfernen.

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

Beim Durchsuchen der Dokumente scheint es keine eingebaute Arraysortierung zu geben. Sie können dies jedoch in Ihrer Vorlage tun:

<app-item *ngFor="let item of someArray.sort(sortFunc)"></app-item>

Definieren Sie dann in Ihrer komponente.ts-Datei die Funktion, da Sie in Ihrer Vorlage keine Funktionen definieren können:

sortFunc (a, b) {
  return a.CREATE_TS - b.CREATE_TS
}

Edit: Simon K wies darauf hin, dass das String-Format einen direkten Vergleich erlaubt, ohne zu Date und dann zu Nummer zu zwingen. Meine ursprüngliche Gleichung (für Szenarien, in denen Ihre Datumszeichenfolge nicht so günstig ist):

return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()
0
Ben Steward