Angular模板中如何对plageHeure排序？当前*ngFor未实现排序

要实现plageHeure数组的时段排序，最常用的有两种方案，你可以根据自己的场景选择：

方案一：组件内预处理排序（推荐，性能更优） #

这种方式会在组件类中对数组进行排序，避免模板中频繁执行排序逻辑，适合大多数场景。

1. 在你的组件.ts文件中，添加一个getter方法返回排序后的数组（这样每次组件变更检测时都会返回最新的排序结果，且不会修改原数组）：

// 假设你的组件中已经定义了plageHeure数组
get sortedPlageHeure() {
  // 按afficheH字段升序排序（从早到晚），如果需要降序就调换a和b的位置
  return [...this.plageHeure].sort((a, b) => a.afficheH - b.afficheH);
}

这里用[...this.plageHeure]先复制原数组，避免sort()方法直接修改原数组内容。

2. 修改模板中的*ngFor，遍历排序后的数组：

<ul>
  <li class="heure" *ngFor="let heure of sortedPlageHeure" [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
    <a *ngIf="heure.unavailable==true" [ngClass]="{ red : heure.unavailable }"> 
      {{heure.afficheH}} - {{heure.afficheH + 1}} 
    </a>
    <a *ngIf="heure.unavailable==false" [ngClass]="{ red : heure.unavailable }"> 
      la journée est libre 
    </a>
  </li>
</ul>

方案二：使用自定义排序管道 #

如果需要在多个模板中复用排序逻辑，可以创建一个自定义管道：

1. 生成管道文件：

ng generate pipe sort

2. 修改sort.pipe.ts的内容，实现按指定字段排序：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sort'
})
export class SortPipe implements PipeTransform {
  transform(value: any[], sortKey: string): any[] {
    // 如果数组为空或没有指定排序字段，直接返回原数组
    if (!value || !sortKey) return value;
    
    // 复制数组后排序，避免修改原数组
    return [...value].sort((a, b) => a[sortKey] - b[sortKey]);
  }
}

3. 在模板中使用管道：

<ul>
  <li class="heure" *ngFor="let heure of plageHeure | sort:'afficheH'" [ngClass]="{ odd: (heure%2 == 0), even: heure %2 == 1 } ">
    <!-- 其余内容不变 -->
  </li>
</ul>

注意事项 #

• 排序逻辑是基于afficheH字段的数值比较，确保这个字段是数字类型（比如9、10而不是字符串"9"），否则排序可能出错。
• 如果你的plageHeure数组是异步获取的（比如从API请求），确保在数据加载完成后再执行排序，或者结合async管道使用（比如plageHeure$ | async | sort:'afficheH'）。

内容的提问来源于stack exchange，提问作者geek pédagogique lcms