Угловой материал, как установить mat-sort-header из mat-table

85
7

У меня есть следующая таблица из углового материала:

<mat-table *ngIf="!waiting" class="table-general table-summary"  #table [dataSource]="dataSource" matSort>
<mat-header-row class="header_row" *matHeaderRowDef="headerKeys"></mat-header-row>
<mat-row class="row" *matRowDef="let row; columns: headerKeys;"></mat-row>
<ng-container *ngFor="let key of headerKeys; let i = index">
<ng-container matColumnDef="{{key}}">
<mat-header-cell class="header_name header_{{key}}" *matHeaderCellDef mat-sort-header> {{getHeaderName(key)}} </mat-header-cell>
<mat-cell class="cell cell_{{key}}" *matCellDef="let row">
<div class="box_cell {{key}}">
<div class="current_value ellipsis" *ngIf="key=='customer'">{{cellValue(row[key])}}</div>
<mh-box-score
*ngIf="key!='customer'"
[value]="cellValue(row[key])"
[type]="cellValue(row[key],'type')+' small'"
[type_number]="'percent'"
[previous_value]="cellValue(row[key],'diff')"
[previous]="cellValue(row[key],'previousLabel')"
></mh-box-score>
</div>
</mat-cell>
</ng-container>
</ng-container>
</mat-table>

он работает идеально. Теперь я хочу изменить позицию стрелки сортировки в заголовке от следующего до предыдущего в соответствии с документацией enter image description here

Я искал все пути, но я не могу сделать то, что кажется таким простым.

Пожалуйста, помогите, я относительно новичок в угловых

спросил(а) 2018-01-02T22:30:00+03:00 3 года, 1 месяц назад
1
Решение
85

Для того, чтобы переместить стрелку необходимо применить @Input() директива пункт arrowPosition к элементу DOM с mat-sort-header: <th mat-sort-header="name" arrowPosition='before'>Dessert (100g)</th>.

Вот пример stackblitz того, как применять arrowPosition для различных заголовков таблиц, раздвоенных непосредственно из примера Material.

ответил(а) 2018-01-02T22:41:00+03:00 3 года, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема