매트-소트-헤더를 사용하여 날짜 문자열별로 정렬하는 방법은 무엇입니까?

매트-소트-헤더를 사용하여 날짜 문자열별로 정렬하는 방법은 무엇입니까?

사건 테이블은 다음과 같이 구성되어 있습니다.angular.material날짜별 정렬을 추가해야 합니다.하지만 내 데이트 상대는string유형을 입력하여 정렬이 잘못되었습니다.기본값을 재정의하는 방법mat-sort-header행동.그리고 가능합니까?

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>

        <!-- Reg Date Column -->
        <ng-container matColumnDef="regDate">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Reg Date </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.regDate}} </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</div>

TS 측에서는:

sort: MatSort;
@ViewChild(MatSort)
set appBacon(sort : MatSort) {
    this.sort = sort;
    this.dataSource.sort = this.sort;
}
dataSource = new MatTableDataSource([]);

해결 방법은 다음과 같습니다. - 정렬 DataAccessor 함수에서 Pass Date 개체를 사용하면 개체가 올바르게 정렬됩니다.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
    case 'fromDate': return new Date(item.fromDate);
    default: return item[property];
  }
};

MatTableDataSource에는 필요에 따라 사용자 지정할 수 있는 정렬 데이터 액세스 기능이 있습니다.

사가르 카르체의 답변을 확대합니다.MatTableDataSource에서 DataAccessor 정렬을 재정의해야 합니다.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
     case 'fromDate': return new Date(item.fromDate);
     default: return item[property];
  }
};

'item'은 'dataSource: MatTableDataSource<ObjectName>'의 ObjectName입니다.

'matColumnDef="startDate" 특성이 들어오는 'matColumnDef'입니다.

예를 들어 다음과 같은 개체가 있을 수 있습니다.

export interface IPersonInfo {
    name: string,
    position: string,
    startDate: string,
    salary: string
}

날짜 테이블 요소는 다음과 같습니다.

<ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef> Start Date </th>
    <td mat-cell *matCellDef="let element"> {{element.startDate}} </td>
</ng-container>

따라서 헤더를 클릭하여 '시작 날짜'를 정렬하면 startDate 열의 모든 개체가 '항목' 값으로 하나씩 전달되는 반면 matColumnDef="startDate"의 '시작 날짜'는 정렬 DataAccessor 함수의 '시작 날짜' 값으로 전달됩니다.

따라서 데이터 액세스 정렬 기능을 사용하면 모든 열을 재정의할 수 있습니다.

this.dataSource.sortingDataAccessor = (item, property) => {
  switch (property) {
     case 'name': return item.name;
     case 'position': return item.position;
     case 'startDate': return item.startDate;
     case 'salary': return item.salary;
     default: return item[property];
  }
};

네, 가능합니다.

다음을 수행할 기능을 제공해야 합니다.MatTableDataSource.sortData들판.

서명 및 기본 구현은 여기에서 확인할 수 있습니다.

예:

customSortData(data: T[], sort: MatSort): T[] {
 // sort.active will tell you if sort is active and for which headerid
 // sort.direction will tell u if sort is 'asc' or not
return data.sort((a, b) => {// Ur implementation});
}

모든 유형의 배열을 사용하는 대신 항상 테이블에 유형을 사용하는 것이 좋습니다.동일한 인터페이스를 정의할 수 있습니다.

도움이 되길 바랍니다.:)

저는 사가르 카르체의 대답에 추가하고 싶습니다.

sortingDataAccessor는 'string | number'만 반환합니다.따라서 Date 개체만 반환하면 다음 오류가 발생합니다.

string | number | Date'는 '(data: Inventory, sortHeaderId: string) => string | number' 유형에 할당할 수 없습니다.

그래서 대신 이렇게 했습니다.

  this.dataSource.sortingDataAccessor = (item, property) => {
    switch(property) {
      case 'dateReceived': return new Date(item.dateReceived).getTime();
      case 'dateOpened': return new Date(item.dateOpened).getTime();
      default: return item[property as keyof Inventory] as string;
    }
  }

여기서 날짜에 대한 Time()을 가져와서 숫자를 반환하고 다른 모든 속성에 대한 문자열을 기본값으로 반환합니다.저는 또한 추가했습니다.item[property as keyof Inventory] as string이 오류를 수정하는 기본 사례:

'Inventory' 유형에서 매개 변수가 'string' 유형인 인덱스 서명을 찾을 수 없습니다.

저는 또한 이 블로그를 팔로우했습니다: https://www.angularjswiki.com/material/mat-table-sort/

언급URL : https://stackoverflow.com/questions/49603499/how-to-sorting-by-date-string-with-mat-sort-header