Angular实现点击按钮对对象数组name属性按字母升降序排序

核心使用TS/JS原生的Array.sort()方法搭配字符串的localeCompare()方法实现字母顺序排序，步骤如下：

1. 新增排序状态标记
   在组件类中新增状态变量，记录当前排序方向，方便点击按钮时切换升/降序：

// true = 升序，false = 降序，默认初始为升序
isNameSortAsc: boolean = true;

2. 编写排序触发方法
   在组件类中新增按钮点击时调用的排序方法，注意不要直接原地修改原数组，避免Angular变更检测不触发：

sortByName(): void {
  // 浅拷贝原数组生成新引用，保证视图能正常更新
  this.items = [...this.items].sort((prev, curr) => {
    // 按本地化字母规则比较name字段，兼容大小写、带重音的字符场景
    const compareRes = prev.name.localeCompare(curr.name, undefined, {
      sensitivity: 'accent'
    });
    // 根据当前排序状态返回正/反向比较结果
    return this.isNameSortAsc ? compareRes : -compareRes;
  });
  // 切换排序方向，下次点击执行反向排序
  this.isNameSortAsc = !this.isNameSortAsc;
}

3. 模板绑定按钮事件
   在组件HTML模板中添加按钮，绑定点击事件，还可以根据排序状态动态显示按钮文案：

<button (click)="sortByName()">
  按名称{{ isNameSortAsc ? '升序' : '降序' }}排列
</button>

关键说明 #

• 如果你不需要单按钮切换排序，而是要两个按钮分别固定触发升序、降序，不需要状态变量，直接写两个排序方法即可：
  • 固定升序排序逻辑：this.items = [...this.items].sort((a,b) => a.name.localeCompare(b.name))
  • 固定降序排序逻辑：this.items = [...this.items].sort((a,b) => b.name.localeCompare(a.name))
• 不建议直接用a.name > b.name的判断做比较，这种方式基于Unicode编码值排序，对大小写混合、带特殊重音的字母排序结果不符合常规字母排序预期。
• 用扩展运算符[...this.items]做浅拷贝是因为sort()是原地排序方法，直接修改原数组不会改变数组引用地址，在Angular默认变更检测策略下可能出现数据变了但视图不更新的问题。

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