web-dev-qa-db-ja.com

Angular 6日付によるオブジェクトの配列の並べ替え

Angular 6アプリケーションの日付で配列オブジェクトをソートしようとしました。データは文字列形式です。 Angularでソートを実行する既存のモジュールがあるのか​​、それともTypeScriptでソート機能を構築する必要があるのでしょうか。

角度テンプレート

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

配列

[
  {
    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
13
Huy Le

不可解な答えに加えて、テンプレートに含めるためにソートされた値をアクセサでラップし、TypeScriptクラスにゲッターを追加することができます。

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

そしてテンプレートで：

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

または、配列をコンポーネントクラスに入れて配列を並べ替え、そこに並べ替えたバージョンを格納できますが、アクセサーパターンは動的な並べ替えに非常に役立ちます。

11
derelict

配列にsort関数を使用でき、比較関数を取ります。日付文字列を日付オブジェクトに解析し、それでソートします。

こちら の詳細を読む

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

上昇

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

降順

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

Array.sortを使用してデータを並べ替えることができます。

Stackblitzでデモを作成しました。これがあなたや他の人に役立つ/ガイドになることを願っています。

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

component.html

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

TypeScriptでこのメソッドを使用すると、日付の値を任意の順序で簡単に並べ替えることができます。また、新しいDate（）メソッドとgetTimeメソッドを削除するだけで、数値や文字列などの他のデータ型をソートできます。

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

ドキュメントを見ると、組み込みの配列の並べ替えはないようです。ただし、テンプレートでこれを行うことができます。

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

次に、component.tsファイルで関数を定義します。テンプレートで関数を定義することはできません。

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

編集：サイモンKは、文字列形式は日付に強制し、その後番号に強制せずに直接比較することができることを指摘した。私の元の方程式（日付文字列がそれほど便利でないシナリオの場合）：

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

最近の最初の場合：

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

OlderFirstの場合：

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