AngularMaterialのデフォルトの並べ替え-並べ替えヘッダー


89

以下のAngularMaterialコードを変更して、データテーブルがデフォルトで昇順で「name」列でソートされるようにするにはどうすればよいですか。矢印(現在のソート方向を示す)を表示する必要があります。

これが私が達成したいことです:

ここに画像の説明を入力してください

元のコード:

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

プランカーへのリンクはこちら


小切手プランカーを呼び出すことthis.sortData({active: "name", direction: "asc"})ができますngOnInit
Pankaj Parkar 2017年

1
@PankajParkarそれは正しい解決策ではありません。テーブルは並べ替えられますが、並べ替えヘッダーはそれを認識せず、矢印(現在の並べ替え方向を示す)は表示されません。
ヤツェクKościesza

回答:


138

あなたはと間違えmatSortStartていmatSortDirectionます。

これを試して:

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

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

matSortStart 並べ替え時に使用されるサイクルを逆にするために使用できます(たとえば、ユーザーがクリックして並べ替えると、ascではなくdescから始まります)。


5
この方法は初めて機能します。テーブルのdataSourceが変更された後、をリセットしようmatSortActiveとしましたmatSortDirectionが、小さな矢印が表示されません
Gil Epshtain 2018

サンプルはもう機能していないようです。新しいサンプルを作成しました:stackblitz.com/edit/angular-defaultsort?file
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イベントをトリガーすることです。イベントをトリガーせずに並べ替えを設定する方法はありますか?
rain 0119年

いいえ。そのようにソートが呼び出されます。matSortChangeイベントをトリガーしたくないのはなぜですか?
NinoFiliu19年

1
列のasc/descでCookieを更新するように設定しているため、ページが読み込まれるたびに呼び出されると、毎回異なります
rain01

17
@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;
}

4
後でユーザーがあなたのアイデア/コードをより簡単にフォローできるように、コードと一緒にいくつかの説明を提供してください。
HansHirse

1
ここでは、Ninoの並べ替えとCSSの回避策を使用して、プログラムで設定された並べ替えで矢印を表示しました。
BTS

角度7では、this.sort = {active: 'name'、direction: 'desc'};を設定しました。矢印をアクティブにするためにCSSの変更を追加する必要はありませんでした。
ニックガリモア

Nick Gallimore多分あなたは正しい場所にあなたのCSSを追加していませんか?メインのグローバルcssファイルに追加してみてください(assets / css / ... cssに
含める

10

マテリアルの更新(v7.3でテスト済み):

@ViewChild(MatSort) matSort: MatSort;

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

これにより、mat-sort-header回避策なしでの矢印も更新されます


3

マットテーブルの並べ替えプロパティをコンポーネント変数にバインドすることもできます。

@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

たぶん、ページのinitで、名前と方向を強制するソート関数を呼び出そうとしましたか?

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

6
それは正しい解決策ではありません。テーブルがソートされているが、ソートヘッダは、(現在のソート方向を示す)矢印それについて知っているとしない表示されていない
ヤツェクKościesza

1

私の場合、matColumDefidとmat- cellvarが異なるため、並べ替えが機能しませんでした

<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"をitemと同じ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の2つのプロパティを持つインターフェイスであり、インターフェイスは次のようになっている必要があります。

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コードは受け入れられた答えのとおりです;-)これが誰かに役立つことを願っています、アレックス

ドキュメントの例


0

行動に影響を与えるいくつかの要因があります。ほとんどの場合、MatTableDataSourceDataSourceの手作りの派生物を使用しています。そのため、異なるソリューションが機能する場合と機能しない場合があります。

とにかく、それはGitHubで十分にカバーされている古いバグです。Angularチームの注目を集めるために、そのGitHubの問題に賛成してください。

そのGitHubスレッド(リンク)で公開されている最も耐久性のあるソリューションは、並べ替え順序を適用するときに次のメソッドを呼び出すことです。

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 });
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.