如何在TypeScript中按URI特定部分将对象分组（Angular场景）

可以用Array.reduce()高效完成分组逻辑，这是处理数组分组最简洁高效的方式之一。核心思路是提取每个对象URI中/v2/之后的部分作为分组键，将相同键的对象归入同一组，最终输出适配可展开复选框的数组结构。

类型定义（TypeScript可选） #

先定义清晰的数据结构，方便类型检查：

interface OriginalItem {
  id: number;
  uri: string;
  // 可添加其他业务属性
}

interface GroupedItem {
  groupName: string;
  items: OriginalItem[];
}

分组函数实现 #

groupItemsByUriSuffix(items: OriginalItem[]): GroupedItem[] {
  // 用reduce生成以分组键为key的临时对象
  const groupedObj = items.reduce((acc, item) => {
    // 提取/v2/之后的内容作为分组名，无匹配项则归入"未分组"
    const suffix = item.uri.split('/v2/')[1] || '未分组';
    if (!acc[suffix]) {
      acc[suffix] = [];
    }
    acc[suffix].push(item);
    return acc;
  }, {} as Record<string, OriginalItem[]>);

  // 将临时对象转换为数组格式，适配复选框组件渲染需求
  return Object.entries(groupedObj).map(([groupName, items]) => ({
    groupName,
    items
  }));
}

组件中使用示例 #

export class AppComponent {
  // 示例原始数据
  originalItems: OriginalItem[] = [
    { id: 1, uri: '/api/v2/users' },
    { id: 2, uri: '/api/v2/users' },
    { id: 3, uri: '/api/v2/orders' },
    { id: 4, uri: '/api/v3/products' },
  ];

  groupedItems: GroupedItem[];

  ngOnInit() {
    this.groupedItems = this.groupItemsByUriSuffix(this.originalItems);
  }

  // 可选：全选组内项的方法
  selectAllInGroup(event: Event, items: OriginalItem[]) {
    const isChecked = (event.target as HTMLInputElement).checked;
    items.forEach(item => item['selected'] = isChecked);
  }
}

模板渲染可展开复选框（以Angular Material为例） #

<mat-accordion>
  <mat-expansion-panel *ngFor="let group of groupedItems">
    <mat-expansion-panel-header>
      <mat-checkbox (change)="selectAllInGroup($event, group.items)">
        全选 {{ group.groupName }}
      </mat-checkbox>
    </mat-expansion-panel-header>
    <div *ngFor="let item of group.items" class="item-checkbox">
      <mat-checkbox [(ngModel)]="item.selected">
        {{ item.id }} - {{ item.uri }}
      </mat-checkbox>
    </div>
  </mat-expansion-panel>
</mat-accordion>

进阶调整 #

如果需要更精确的分组（比如仅取/v2/后的第一段路径），可以修改后缀提取逻辑：

// 例如将/api/v2/users/list归入users组
const suffix = item.uri.split('/v2/')[1]?.split('/')[0] || '未分组';

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