从标题图标自定义垫表排序

如何解决从标题图标自定义垫表排序

<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 点击。