Angular数组元素截取前两位后去重并升序排序求助

方法一：组件内预处理数据（推荐） #

直接在组件里对locations数组完成截取前缀、去重、排序的操作，得到处理后的数组再渲染到模板里，这种方式性能更优。

修改你的TS代码：

locations: string[];
processedLocations: string[]; // 新增存储处理后数据的数组

builder() {
  this.locations = [
    '01-34-56-75-41',
    '10-34-22-75-53',
    '26-34-34-75-63',
    '00-89-56-75-43',
    '10-34-56-75-43',
    '20-33-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
    '00-34-56-75-43',
  ];
  
  // 一步完成截取前两位、去重、排序
  this.processedLocations = Array.from(new Set(this.locations.map(item => item.slice(0, 2))))
    .sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
}

然后更新HTML模板，遍历处理好的数组：

<div class="row">
   <p id="p" style="font-size: 30px;">Máximo:<input style="margin-left: 10px; font-size: 30px;" type="text"></p>
   <div *ngFor="let code of processedLocations"><button>{{ code }}</button></div>
</div>

逻辑说明

• locations.map(item => item.slice(0, 2))：把每个数组元素的前两位截取出来，得到全量前缀数组
• new Set(...)：利用Set的特性自动过滤重复值
• Array.from(...)：把Set对象转回普通数组
• sort((a, b) => parseInt(a, 10) - parseInt(b, 10))：将前缀转成数字后排序，避免字符串排序的异常（比如"10"不会排在"01"前面）

方法二：自定义管道（适合多组件复用场景） #

如果这个处理逻辑需要在多个地方复用，可以自定义一个Angular管道：

1. 创建管道文件 #

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

@Pipe({
  name: 'processLocation'
})
export class ProcessLocationPipe implements PipeTransform {
  transform(value: string[]): string[] {
    if (!value || value.length === 0) return [];
    
    return Array.from(new Set(value.map(item => item.slice(0, 2))))
      .sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
  }
}

2. 在模块中注册管道 #

在你的Angular模块里声明并导出这个管道：

import { NgModule } from '@angular/core';
import { ProcessLocationPipe } from './process-location.pipe';

@NgModule({
  declarations: [ProcessLocationPipe],
  exports: [ProcessLocationPipe] // 需要跨组件使用的话必须导出
})
export class YourModule { }

3. 模板中使用管道 #

<div class="row">
   <p id="p" style="font-size: 30px;">Máximo:<input style="margin-left: 10px; font-size: 30px;" type="text"></p>
   <div *ngFor="let code of locations | processLocation"><button>{{ code }}</button></div>
</div>

注意点

• 默认管道是纯管道，只有当输入数组的引用变化时才会重新计算。如果locations是动态更新的，要确保每次更新都生成新数组（比如用this.locations = [...this.locations, newItem]），或者把管道设为非纯管道（但非纯管道会频繁触发计算，性能开销大，尽量避免）。

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