Сортування за замовчуванням у кутовому матеріалі - Заголовок сортування

Як я можу змінити код Angular Material нижче, щоб таблиця даних була відсортована за стовпчиком "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>

Ось посилання на Plunker

Ви помиляєтесь matSortStartіз matSortDirection.

Спробуйте це:

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

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

matSortStart може використовуватися для звороту циклу, який використовується при сортуванні (наприклад, коли користувач натискає кнопку сортування, вона починається з desc замість asc).

Ви можете програмно відсортувати таблицю, викликаючи 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;

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

Оновлення для матеріалу (перевірено за допомогою v7.3):

@ViewChild(MatSort) matSort: MatSort;

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

Це також оновить mat-sort-headerстрілку 'без будь-яких обхідних шляхів

Ви також можете прив'язати властивості сортування таблиці mat до своєї змінної компонента.

Як каже @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">

Можливо, ви намагалися викликати на ініціюванні сторінки функцію сортування, нав'язану імені та напрямку?

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

У моєму випадку сортування не працювало, оскільки ідентифікатор matColumDef та var-комірки mat відрізняються

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

у мене це прекрасно працює

Мені довелося зробити стандартне сортування при завантаженні

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 (перша та прийнята відповідь) зробила для мене візуальну хитрість, але таблиці не відсортувала .

Моє рішення - використати html-код, наданий @Andrew Seguin, і сам викликати метод sortData (sort: Sort) , але як це зробити? Як зазначено в документації , `` Сортувати '' - це інтерфейс, який має дві властивості, активну та напрям, і інтерфейс повинен виглядати приблизно так:

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

Тож фокус полягає у виклику методу sortData (sort: Sort) у ngOnInit наступним чином:

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-код такий, як у прийнятій відповіді ;-) Сподіваюся, це допомагає комусь, Алекс

Приклади документації