Angular不使用Pipe在模板实现排序的最优方案（保留原数据）

你的思路完全正确——Angular中类的getter属性就是和Vue computed属性最接近的实现方式，完美满足「不修改原始数据、保留原数据引用」的要求，同时避开了官方不推荐的Pipe方案的性能问题。

核心实现逻辑 #

• 保留原始数据：组件中维护一份未被修改的原始数据源，所有排序操作基于这份数据的拷贝进行。
• 用getter返回排序后的副本：通过类的getter方法，对原始数据做浅拷贝后执行排序逻辑，返回新的数组（原数据完全不受影响）。

示例代码 #

组件类代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-sorted-list',
  templateUrl: './sorted-list.component.html'
})
export class SortedListComponent {
  // 原始数据：始终保持未修改状态，保留原引用
  rawData = [
    { name: 'Banana', price: 2 },
    { name: 'Apple', price: 5 },
    { name: 'Orange', price: 3 }
  ];

  // 类似Vue computed的getter，返回按价格排序后的新数组
  get sortedDataByPrice() {
    // 先浅拷贝原数组（避免sort()修改原数据），再执行排序
    return [...this.rawData].sort((a, b) => a.price - b.price);
  }

  // 按名称排序的getter
  get sortedDataByName() {
    return [...this.rawData].sort((a, b) => a.name.localeCompare(b.name));
  }
}

模板代码

<!-- 渲染按价格排序后的列表 -->
<h3>按价格排序</h3>
<ul>
  <li *ngFor="let item of sortedDataByPrice">
    {{ item.name }} - ￥{{ item.price }}
  </li>
</ul>

<!-- 渲染按名称排序后的列表 -->
<h3>按名称排序</h3>
<ul>
  <li *ngFor="let item of sortedDataByName">
    {{ item.name }} - ￥{{ item.price }}
  </li>
</ul>

<!-- 原始数据不受影响 -->
<h3>原始数据</h3>
<ul>
  <li *ngFor="let item of rawData">
    {{ item.name }} - ￥{{ item.price }}
  </li>
</ul>

关键细节说明 #

• 为什么要浅拷贝？：数组的sort()方法会原地修改原数组，所以必须先用[...this.rawData]或this.rawData.slice()创建原数组的副本，再对副本排序，确保原始数据的引用和内容都不会被改变。
• 性能优化：如果原始数据是异步获取（比如从API请求），可以结合ngIf或可选链操作符（?.）避免空值报错；如果排序逻辑复杂，可以将排序逻辑抽成私有方法，在getter中调用，提升代码可读性。
• 参数化排序：如果需要动态切换排序字段/规则，可以在组件中定义一个控制变量（比如sortKey），在getter中根据该变量执行对应排序逻辑，比如：

  sortKey: 'price' | 'name' = 'price';
  
  get sortedData() {
    return [...this.rawData].sort((a, b) => {
      if (this.sortKey === 'price') {
        return a.price - b.price;
      } else {
        return a.name.localeCompare(b.name);
      }
    });
  }
  

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