Angular中如何实现表格排序箭头随当前列单独切换？

当前代码中所有排序列共用一个全局的sorting变量，导致点击任意列时，所有列的箭头都会同步变化。要实现点击某列仅该列箭头切换，需要按列单独存储排序状态，具体修改如下：

修改TypeScript代码 #

将单个排序状态变量改为对象，记录每列的排序方向，同时让sort函数接收列名参数，只切换对应列的状态：

// 初始化需要显示箭头的列的排序状态
sortStates: { [key: string]: 'asc' | 'desc' } = {
  no: 'desc',
  id: 'desc'
};

sort(columnName: string) {
  this.sortStates[columnName] = this.sortStates[columnName] === 'desc' ? 'asc' : 'desc';
}

修改HTML代码 #

• 点击事件传递当前列的data-name值
• 箭头显示条件改为判断当前列的sortStates值
• 更新data-order属性绑定为对应列的排序状态

<tr>
  <th scope="col" [appSort]="dataList" [attr.data-order]="sortStates['no']" data-name="no">
    <span (click)="sort('no')" class="sort-icon d-flex"> No
      <mat-icon *ngIf="sortStates['no'] === 'desc'">keyboard_arrow_down</mat-icon>
      <mat-icon *ngIf="sortStates['no'] === 'asc'">keyboard_arrow_up</mat-icon>
    </span>
  </th>
  <th scope="col" [appSort]="dataList" [attr.data-order]="sortStates['id']" data-name="id">
    <span (click)="sort('id')" class="sort-icon d-flex">Id
      <mat-icon *ngIf="sortStates['id'] === 'desc'">keyboard_arrow_down</mat-icon>
      <mat-icon *ngIf="sortStates['id'] === 'asc'">keyboard_arrow_up</mat-icon>
    </span>
  </th>
  <th scope="col" [appSort]="dataList" data-order="desc" data-name="type">Tür</th>
  <th scope="col" [appSort]="dataList" data-order="desc" data-name="additional">Ek</th>
  <th scope="col" [appSort]="dataList" data-order="desc" data-name="media">Medya</th>
</tr>

改动说明 #

1. 按列存储状态：用sortStates对象替代全局sorting变量，每个列名对应独立的排序方向，避免列之间的状态干扰。
2. 定向修改状态：sort函数接收点击的列名参数，只更新该列的排序状态，不影响其他列。
3. 绑定独立状态：HTML中箭头显示条件和data-order属性都绑定到当前列的sortStates值，确保仅当前列的箭头随点击切换。

内容的提问来源于stack exchange，提问作者greJuva