Angular Material의 기본 정렬-정렬 헤더


85

데이터 테이블이 기본적으로 오름차순으로 '이름'열별로 정렬되도록 아래 Angular Material 코드를 어떻게 변경할 수 있습니까? 화살표 (현재 정렬 방향을 나타냄)가 표시되어야합니다.

이것이 내가 이루고 싶은 것입니다.

여기에 이미지 설명 입력

원래 코드 :

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

나는 이와 같은 것을 시도했지만 작동하지 않습니다 (화살표가 표시되지 않고 정렬되지 않음)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

Plunker에 대한 링크입니다.


전화 수 this.sortData({active: "name", direction: "asc"})ngOnInit체크 plunker
판 카즈 Parkar에게

1
@PankajParkar 올바른 해결책이 아닙니다. 테이블이 정렬되어 있지만 정렬 헤더가 그것에 대해 알지 못하며 화살표 (현재 정렬 방향을 나타냄)가 표시되지 않습니다.
Jacek Kościesza

답변:


134

당신은 착각하고 matSortStart위해 matSortDirection.

이 시도:

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="asc" matSortDisableClear>

https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview

matSortStart 정렬 할 때 사용되는주기를 반대로하는 데 사용할 수 있습니다 (예 : 사용자가 정렬하기 위해 클릭하면 asc 대신 desc에서 시작).


4
이 방법은 처음으로 만 작동합니다. 테이블의은 dataSource이 변경된 후, 나는를-다시 설정하려고 matSortActive하고 matSortDirection있지만 작은 화살표가 표시되지 않습니다
길 Epshtain을

샘플이 더 이상 작동하지 않는 것 같습니다. 새로운 샘플을 만들었습니다. stackblitz.com/edit/angular-defaultsort?file=src/app/…
Ben

45

sort(Sortable)데이터 소스 의 메서드를 호출하여 프로그래밍 방식으로 테이블을 정렬 할 수 있습니다 . dataSource데이터 소스에 대한 구성 요소 속성 이 있다고 가정합니다 .

// to put next to the class fields of the component
@ViewChild(MatSort) sort: MatSort

// to put where you want the sort to be programmatically triggered, for example inside ngOnInit
this.sort.sort(({ id: 'name', start: 'asc'}) as MatSortable);
this.dataSource.sort = this.sort;

1
이것은 내가 찾고있는 종류이지만 유일한 문제는 matSortChange이벤트를 트리거한다는 것 입니다. 이벤트를 트리거하지 않고 정렬을 설정하는 방법이 있습니까?
rain01

아뇨. 그게 정렬이 호출되는 방법입니다. matSortChange 이벤트가 트리거되는 것을 원하지 않는 이유는 무엇입니까?
니노 Filiu

1
열의 asc/ desc로 쿠키를 업데이트하도록 설정했기 때문에 페이지가로드 될 때마다 호출되면 매번 달라집니다
rain01

16
@ViewChild(MatSort) sort: MatSort;

this.dataSource.sort = this.sort;

const sortState: Sort = {active: 'name', direction: 'desc'};
this.sort.active = sortState.active;
this.sort.direction = sortState.direction;
this.sort.sortChange.emit(sortState);

작동해야합니다. 데모

정렬 방향 화살표를 표시하려면 다음 CSS를 추가하십시오 (해결 방법).

th.mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

2
나중에 사용자가 아이디어 / 코드를 더 쉽게 따를 수 있도록 코드와 함께 몇 가지 설명을 제공하십시오.
HansHirse

1
Nino 의 정렬 과 여기 CSS 해결 방법을 사용하여 화살표를 표시하도록 프로그래밍 방식으로 설정된 정렬을 얻었습니다.
방탄 소년단

각도 7에서는 this.sort = {active : 'name', direction : 'desc'}; 화살표를 활성화하기 위해 CSS 변경 사항을 추가 할 필요가 없습니다.
Nick Gallimore

Nick Gallimore가 잘못된 위치에 CSS를 추가하고 있습니까? (가 자산 / CSS / ... CSS에있을 수 있습니다) 주요 글로벌 CSS 파일에 추가하려고
아만 Madiiarbekov에게

10

재료 업데이트 (v7.3에서 테스트) :

@ViewChild(MatSort) matSort: MatSort;

private someMethod(): void {
  this.matSort.sort({ id: 'columnName', start: 'asc', disableClear: false });
}

이렇게하면 mat-sort-header해결 방법없이의 화살표 도 업데이트됩니다.


2

매트 테이블 정렬 속성을 구성 요소 변수에 바인딩 할 수도 있습니다.

@Andrew Seguin은 다음과 같이 말합니다.

<table matSort matSortActive="name" matSortDirection="asc">

이것이 어느 것이인지 아는 경우 기본 정렬을 설정하는 적절한 방법입니다.

다른 곳에서 정렬하는 경우 (제 경우에는 쿼리 문자열 매개 변수에서) 다음과 같이 수행 할 수도 있습니다 (정렬 화살표는 여기에서 완벽하게 작동 함).

sortDirection: 'name',  // this can be changed or filled in any time
sortProperty: 'asc',


<mat-table matSort [matSortActive]="sortProperty" [matSortDirection]="sortDirection">

1

아마도 페이지의 초기화에서 이름과 방향에 강제로 정렬 기능을 호출하려고 했습니까?

     ngOnInit() {
    let defSort: Sort = {};
    defSort.direction = 'asc';
    defSort.active = 'name';
    this.sortData(defSort);
  }

5
올바른 해결책이 아닙니다. 표 정렬되지만 정렬 헤더 (현재 정렬 방향을 나타내는) 화살표 그것에 대해 알고하지 않습니다 표시되지 않습니다
제이 섹 Kościesza

1

제 경우에는 matColumDef id와 mat-cell var가 다르기 때문에 정렬이 작동하지 않았습니다.

<ng-container matColumnDef="firstName">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

matColumnDef = "firstName"을 항목과 동일한 matColumnDef = " name "으로 변경 한 후 . 이름

    <ng-container matColumnDef="name">
   <th mat-header-cell *matHeaderCellDef mat-sort-header class="mat-table-header">First Name</th>
  <td mat-cell *matCellDef="let item"> {{ item.name}}</td>
</ng-container>

그것은 나를 위해 잘 작동합니다


0

로드시 기본 정렬을해야했습니다.

const matSort = { id: defaultSort.name } as MatSortable;
this.sort.direction = defaultSort.sort === 'asc' ? '' : defaultSort.sort === 'desc' ? 'asc' : 'desc' as SortDirection;
this.sort.sort(matSort);

0

@Andrew Seguin (첫 번째 및 수락 된 답변)의 대답은 시각적 트릭을했지만 테이블을 정렬 하지 않았습니다 .

내 해결책은 @Andrew Seguin이 제공하는 html 코드를 사용하고 sortData (sort : Sort) 메서드를 직접 호출하는 것입니다.하지만 어떻게해야합니까? 문서에 지정된대로 ,, Sort ''는 active 및 direction이라는 두 가지 속성이있는 인터페이스이며 인터페이스는 다음과 같아야합니다.

export interface Sort {
   active:string //The id/name of the column being sorted
   direction:string //asc or dsc depending on the use case (The sort direction)
}

따라서 트릭은 다음과 같이 ngOnInit에서 sortData (sort : Sort) 메서드를 호출하는 것입니다.

ngOnInit(){
    //Do some nitialization
    this.sortData({active:'name', direction:'asc'});
}

sortData(sort: Sort) {
    //Your sorting algorithm (see examples in documentation, link above and at the bottom)
}

HTML 코드는 수락 된 답변과 같습니다 ;-) 이것이 누구에게나 도움이되기를 바랍니다, Alex

문서 예

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.