Как я могу изменить код 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
angular
angular-material
Яцек Кошича
источник
источник
this.sortData({active: "name", direction: "asc"})
наngOnInit
чек- плункерОтветы:
Вы ошибаетесь
matSortStart
заmatSortDirection
.Попробуй это:
https://plnkr.co/edit/sg0hC5d8LTjLKhbH9Eug?p=preview
matSortStart
может использоваться для изменения цикла, используемого при сортировке (например, когда пользователь щелкает для сортировки, он начинается с desc вместо asc).источник
matSortActive
и,matSortDirection
но маленькая стрелка не отображаетсяВы можете программно отсортировать таблицу, вызвав
sort(Sortable)
метод источника данных. Предполагая, что у вас естьdataSource
свойство компонента для источника данных:источник
matSortChange
событие. Есть ли способ установить сортировку без запуска события?asc
/desc
столбца, и если он вызывается каждый раз при загрузке страницы, то каждый раз он будет другимдолжно сработать. демо
И чтобы показать стрелку направления сортировки, добавьте следующий css (обходной путь)
источник
Обновление для материалов (проверено с v7.3):
Это также обновит
mat-sort-header
стрелку без какого-либо обходного путиисточник
Вы также можете привязать свойства сортировки mat-table к переменной вашего компонента.
Как говорит @Andrew Seguin:
Это правильный способ установить сортировку по умолчанию, если вы знаете, какая это.
В случае, если вы получаете сортировку откуда-то еще (в моем случае из параметров строки запроса), вы также можете сделать это следующим образом (здесь отлично работают стрелки сортировки):
источник
Может быть, вы пытались вызвать при инициализации страницы функцию сортировки по имени и направлению?
источник
В моем случае сортировка не работала, потому что matColumDef id и mat-cell var разные
после внесения изменений matColumnDef = "firstName" на matColumnDef = " name ", которое совпадает с элементом. имя
Он отлично работает для меня
источник
Мне пришлось сделать сортировку по умолчанию при загрузке
источник
Ответ от @Andrew Seguin (первый и принятый ответ) сделал для меня визуальный трюк, но он не сортировал таблицу.
Мое решение - использовать html-код, предоставленный @Andrew Seguin, и сам вызвать метод sortData (sort: Sort) , но как это сделать? Как указано в документации , «Сортировка» - это интерфейс, который имеет два свойства: активное и направление, и интерфейс должен выглядеть примерно так:
Итак, уловка состоит в том, чтобы вызвать метод sortData (sort: Sort) в ngOnInit следующим образом:
Код HTML такой же, как в принятом ответе ;-) Надеюсь, это поможет кому-нибудь, Алекс
Примеры документации
источник
Есть несколько факторов, влияющих на поведение. В основном это использование MatTableDataSource по сравнению с производной от DataSource, созданной вручную. . Таким образом, в одних случаях разные решения могут работать, а в других - нет.
В любом случае, это старая ошибка, о которой хорошо сказано на GitHub . Пожалуйста, проголосуйте за эту проблему GitHub, чтобы привлечь внимание команды Angular.
Самое надежное решение, опубликованное в этом потоке GitHub ( ссылка ), - это вызвать следующий метод применения порядка сортировки:
источник