web-dev-qa-db-ja.com

Angular Materialのデフォルトのソート-ヘッダーのソート

以下のAngular Materialコードを変更して、データテーブルが 'name'列で並べ替えられ、デフォルトで昇順で並べ替えられるようにするにはどうすればよいですか。矢印（現在の並べ替え方向を示す）を表示する必要があります。

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

enter image description here

元のコード：

<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 へのリンクはこちら

angularangular-material
42
Jacek Kościesza

matSortStartをmatSortDirectionと間違えています。

これを試して：

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

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

matSortStartは、ソート時に使用されるサイクルを逆にするために使用できます（たとえば、ユーザーがソートするためにクリックすると、ascではなくdescで開始します）。

68
Andrew Seguin

データソースの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;
19
Nino Filiu
@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;
}
11
Aman Madiiarbekov

たぶん、ページの初期化時に名前と方向を強制するソート関数を呼び出そうとしましたか？

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

素材の更新（v7.3でテスト済み）：

@ViewChild(MatSort) matSort: MatSort;

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

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

0
sschmid