<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" [matSortDisableClear]="false">
<ng-container *ngFor="let column of columnHeader" [cdkColumnDef]="column.columnDef">
<ng-container *ngIf="column.isSortable; else notSortable">
<mat-header-cell *cdkHeaderCellDef mat-sort-header> {{ column.header }}
<mat-icon class="arrowUp">arrow_upward</mat-icon>
<mat-icon class="arrowDown">arrow_downward</mat-icon>
</mat-header-cell>
</ng-container>
<ng-template #notSortable><mat-header-cell *cdkHeaderCellDef>{{
column.header
}}</mat-header-cell></ng-template>
<mat-cell *cdkCellDef="let row">{{ column.cell(row) }} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
CSS
.arrowUp,
.arrowDown {
height: 15px;
width: 15px;
font-size: 15px;
opacity: 0.5;
}
.arrowUp {
margin-left: 10px;
}
::ng-deep .mat-sort-header-arrow[style] .mat-sort-header-stem {
display: none;
}
::ng-deep .mat-sort-header-arrow[style] .mat-sort-header-indicator {
display: none;
}
::ng-deep
.mat-sort-header-arrow[style]
.mat-sort-header-indicator
.mat-sort-header-pointer-left,
::ng-deep
.mat-sort-header-arrow[style]
.mat-sort-header-indicator
.mat-sort-header-pointer-right,
::ng-deep
.mat-sort-header-arrow[style]
.mat-sort-header-indicator
.mat-sort-header-pointer-middle {
display: none;
}
[aria-sort="ascending"] ::ng-deep .arrowUp {
opacity: 1;
pointer-events: none;
}
[aria-sort="descending"] ::ng-deep .arrowDown {
opacity: 1;
pointer-events: none;
}
Ts
import {
AfterViewInit,
Component,
Input,
OnInit,
ViewChild,
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTable, MatTableDataSource } from '@angular/material/table';
import { Column } from '../column.model';
import { Exercise } from '../exercise.model';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css'],
})
export class TableComponent implements OnInit, AfterViewInit {
displayedColumns: string[] = [];
dataSource = new MatTableDataSource<Exercise>();
activeSortColumn: any;
activeSortDirection: any;
constructor() {}
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<any>;
@ViewChild(MatPaginator)
paginator: MatPaginator;
@Input('dataSource') tableData: Exercise[];
@Input() isPageable = false;
@Input() isFilterable = false;
@Input() columnHeader: Column[];
@Input() paginationSizes: number[] = [5, 10, 15];
@Input() defaultPageSize = this.paginationSizes[1];
ngOnInit(): void {
this.dataSource.data = this.tableData;
this.displayedColumns = this.columnHeader.map((c: any) => c.columnDef);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
doFilter(filterValue: any) {
this.dataSource.filter = filterValue.target.value.trim().toLowerCase();
}
sortData(event: any) {
this.activeSortColumn = event.active;
this.activeSortDirection = event.direction;
console.log(this.activeSortColumn, this.activeSortDirection);
}
}
我想要垫子箭头图标而不是默认的垫子排序触发器指示器,该指示器在标题单击时用于对列进行排序。 我可以得到正确的 CSS,无论是升序还是降序,它都会得到正确的箭头,但是每一列都有一个“asc”“desc”和“clear”循环 我不知道如何将它与 mat-arrow 图标合并,以便每当我单击向上箭头时,它都会对“asc”进行排序,反之亦然;它应该只发生在图标点击而不是标题 div 点击。