web-dev-qa-db-fra.com

Angular 6 Sort Tableau d'objets par date

J'essaie de trier l'objet tableau par date pour mon application Angular 6. Les données ont un format de chaîne. Je me demande s'il existe un module existant pour effectuer un tri dans Angular ou si nous devons créer une fonction de tri dans TypeScript.

Gabarit angulaire

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

Le tableau

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

vous pouvez utiliser la fonction sort pour les tableaux, elle prend la fonction de comparaison. Analyser la chaîne de date dans un objet de date et trier par lui.

en savoir plus sur ici

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

Ascendant

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

Descendant

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

en plus de la réponse de cryptic, vous voudrez probablement envelopper les valeurs triées dans un accesseur pour les inclure dans le modèle, en ajoutant un getter dans votre classe TypeScript:

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

et dans le modèle:

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

vous pouvez également trier le tableau au fur et à mesure de son insertion dans votre classe de composant et y stocker la version triée. Toutefois, le modèle d'accesseur peut être très utile pour le tri dynamique.

6
derelict

Vous pouvez utiliser Array.sort pour trier les données.

J'ai créé une démo sur Stackblitz. J'espère que cela vous aidera/guidera les autres.

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

composant.html

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

En utilisant cette méthode dans TypeScript, vous pouvez facilement trier les valeurs de date dans l’ordre que vous souhaitez. Vous pouvez également trier tout type d’autres types de données, tels que nombre ou chaîne, en supprimant simplement les nouvelles méthodes Date () et getTime.

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

En regardant à travers la documentation, il ne semble pas y avoir de tri de tableau intégré. Cependant, vous pouvez le faire dans votre modèle:

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

Et ensuite, dans votre fichier composant.ts, définissez la fonction, car vous ne pouvez pas définir de fonctions dans votre modèle:

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

Edit: Simon K a fait remarquer que le format de chaîne permet une comparaison directe sans contrainte à Date et ensuite à un nombre. Mon équation originale (pour les scénarios où votre chaîne de date n'est pas pratique):

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