Angular Material'de varsayılan sıralama - Üstbilgiyi sırala

Aşağıdaki Angular Material kodunu nasıl değiştirebilirim, böylece veri tablosu varsayılan olarak artan sırada 'ad' sütununa göre sıralanır. Ok (mevcut sıralama yönünü gösteren) görüntülenmelidir.

Başarmak istediğim şey bu:

Orijinal kod:

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

Böyle bir şey deniyordum ama işe yaramıyor (ok gösterilmiyor, sıralanmamış)

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

Plunker bağlantısı burada

Sen karıştırıyorsun konum matSortStartiçin matSortDirection.

Bunu dene:

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

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

matSortStart sıralama yaparken kullanılan döngüyü tersine çevirmek için kullanılabilir (örneğin, kullanıcı sıralamak için tıkladığında, artan yerine azalan ile başlar).

sort(Sortable)Veri kaynağının yöntemini çağırarak tabloyu programlı olarak sıralayabilirsiniz . dataSourceVeri kaynağı için bir bileşen mülkünüz olduğunu varsayarsak :

// 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;

@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);

çalışmalı. demo

Ve sıralama yönü okunu göstermek için sonraki css ekleyin (GEÇİCİ ÇÖZÜM)

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

Malzeme Güncellemesi (v7.3 ile test edilmiştir):

@ViewChild(MatSort) matSort: MatSort;

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

Bu, mat-sort-headerherhangi bir geçici çözüm olmadan okunu da güncelleyecektir.

Mat tablo sıralama özelliklerini bileşen değişkeninize de bağlayabilirsiniz.

@Andrew Seguin'in dediği gibi:

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

Hangisinin bu olduğunu biliyorsanız, varsayılan sıralamayı ayarlamanın uygun yolu budur.

Başka bir yerden sıralama almanız durumunda (benim durumumda sorgu dizesi parametrelerinden), bunu şu şekilde de yapabilirsiniz (sıralama okları burada mükemmel çalışır):

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


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

Belki sayfanın başlangıcında sıralama işlevinin ad ve yöne zorladığı çağrıyı denediniz mi?

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

Benim durumumda, matColumDef id ve mat-cell var farklı olduğundan sıralama çalışmıyordu

<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" ile matColumnDef = " name " arasında değişiklik yaptıktan sonra, bu öğe ile aynıdır. isim

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

benim için iyi çalışıyor

Yüklemede varsayılan sıralama yapmak zorunda kaldım

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

@ Andrew Seguin (ilk ve kabul edilen yanıt) den cevap benim için görsel hile yaptım ama olmadı sıralama tablosu.

Benim çözümüm, @Andrew Seguin tarafından sağlanan html kodunu kullanmak ve sortData (sort: Sort) yöntemini kendim çağırmaktır , ancak bunu nasıl yapabilirim? Dokümantasyonda belirtildiği gibi, `` Sırala '' iki özelliği olan bir arayüzdür, aktif ve yön ve arayüz şöyle görünmelidir:

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

Bu yüzden işin püf noktası ngOnInit'te sortData (sort: Sort) yöntemini aşağıdaki gibi çağırmaktır:

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 kodu kabul edilen cevapta olduğu gibidir ;-) Umarım bu herkese yardımcı olur, Alex

Belge örnekleri

Davranışı etkileyen birçok faktör vardır. Çoğunlukla MatTableDataSource ile DataSource'un el yapımı bir türevi kullanılır . Bu yüzden farklı çözümler bazı durumlarda işe yarayabilir ve diğerlerinde işe yaramayabilir.

Her neyse, GitHub'da çok iyi ele alınan eski bir hata . Angular ekibinin dikkatini çekmek için lütfen GitHub sorununu yükseltin.

Bu GitHub iş parçacığında ( link ) yayınlanan en dayanıklı çözüm , bir sıralama düzeni uygulamak için aşağıdaki yöntemi çağırmaktır:

public setSort(id: string, start?: 'asc' | 'desc') {
    start = start || 'asc';
    const matSort = this.dataSource.sort;
    const toState = 'active';
    const disableClear = false;

    //reset state so that start is the first sort direction that you will see
    matSort.sort({ id: null, start, disableClear });
    matSort.sort({ id, start, disableClear });

    //ugly hack
    (matSort.sortables.get(id) as MatSortHeader)._setAnimationTransitionState({ toState });
}