Я расширяю директиву MatSort для углового материала, чтобы можно было сортировать по нескольким столбцам.Я использую мою директиву на matTable.Я получаю сообщение об ошибке, что MatSortHeader должен содержаться в matSort.
Вот директива
export class MySortDirective extends MatSort{
constructor() {
super()
}
rules: Sort[] = [];
sort = (sortable: MatSortable): void => {
console.log(sortable,'hi')
if (this.active != sortable.id) {
this.active = sortable.id;
this.direction = sortable.start ? sortable.start : this.start;
this.rules.unshift({active: this.active, direction: this.direction});
} else {
this.direction = this.getNextSortDirection(sortable);
this.rules=this.rules.filter(r=>r.active!=this.active);
if(this.direction)this.rules.unshift({active: this.active, direction: this.direction});
}
}
}
Вот соответствующий component.ts (используя Lodash orderBy)
@ViewChild(MySortDirective) sort: MySortDirective;
data:MatTableDataSource<{}> = new MatTableDataSource(this.votes);
ngOnInit() {
this.data.sort = this.sort
this.data.sortData = (data:{}[],sort:MySortDirective)=>orderBy(data,sort.rules.map(r=>r.active),sort.rules.map(r=>r.direction as direc));
}
Здесь уместен html
<mat-table [dataSource]=data mySort >
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="votes">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let element"> {{element.votes}} </td>
</ng-container>
</mat-table>
Как уведомить компоненты заголовка mat-sort-header, что mySort расширяет matSort.