Angular 6 날짜별 객체 배열 정렬

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

사용할 수 있습니다.Array.sort정렬 데이터입니다.

Stackblitz에 대한 데모를 만들었습니다.이것이 당신/다른 사람들에게 도움이 되기를 바랍니다.

구성 요소.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);
    });
  }

구성요소.구성요소

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

최근의 첫 번째 경우:

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

노인 우선:

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

사용할 수 있습니다.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)})

cryptic의 답변 외에도 템플릿에 포함하기 위해 정렬된 값을 접근자로 래핑하여 유형 스크립트 클래스에 게터를 추가할 수 있습니다.

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

및 템플릿:

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

또는 배열을 구성요소 클래스로 가져올 때 배열을 정렬하고 정렬된 버전을 저장할 수 있지만, 액세스 패턴은 동적 정렬에 매우 유용할 수 있습니다.

유형 스크립트에서 이 방법을 사용하면 원하는 순서대로 날짜 값을 쉽게 정렬할 수 있습니다.또한 새 Date() 및 getTime 메서드를 제거하기만 하면 숫자 또는 문자열과 같은 다른 유형의 데이터 유형을 정렬할 수 있습니다.

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

문서를 살펴보니 배열 정렬 기능이 내장되어 있지 않은 것 같습니다.그러나 템플릿에서 이 작업을 수행할 수 있습니다.

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

그런 다음 component.ts 파일에서 함수를 정의합니다. 템플릿에서 함수를 정의할 수 없습니다.

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

편집: Simon K는 문자열 형식을 사용하면 날짜와 숫자로 강제하지 않고 바로 비교할 수 있다고 지적했습니다.원래 방정식(날짜 문자열이 그렇게 편리하지 않은 시나리오의 경우):

return new Date(a.CREATE_TS).getTime() - new Date(b.CREATE_TS).getTime()

새 날짜(a.CREATE_TS) - 새 날짜(b)를 반환할 때 "산술 작업의 왼쪽은 'any', 'number', 'bigint' 또는 열거형 유형 스크립트 오류가 발생하지 않도록 하려면 먼저 날짜를 밀리초 단위로 구문 분석한 다음 정렬을 수행해야 합니다.CREATE_TS):

someArray.sort((a: any, b: any) => { return Date.parse(a.CREATE_TS) - Date.parse(b.CREATE_TS) });

당신이 사용할 수 있는 모멘트.js.

const newArr = myArr.sort((a, b) => moment(b.date).unix() - moment(a.date).unix());

이것을 하는 방법을 연구하는 사람들을 위하여.깊이 중첩된 특성과 유형 스크립트 자동 완성을 지원하는 작은 유형 안전 배열 정렬 방법을 만들었습니다.

https://github.com/jvandenaardweg/sort-by-property

https://www.npmjs.com/package/sort-by-property

예:

arr.sort(sortByProperty('CREATE_TS', 'asc'));

언급URL : https://stackoverflow.com/questions/51867404/angular-6-sort-array-of-object-by-date