Angular中如何对嵌套数组内的用户按字母顺序排序

我有一个嵌套数组，通过ngFor指令遍历展示城市列表，每个城市下显示对应的用户。需要将每个城市下的所有用户按字母顺序排序，同时必须保留permission数组中的其他属性（如entity、name）用于后续逻辑，因此无法单独抽离用户数组。

原代码 #

HTML代码 #

<div *ngFor="let data of locations$ | async">
{{ data.name }}

<ul *ngFor="let permission of getPermissions(data) | async">
 <ng-container *ngFor="let user of permission.users">
  <li>{{ user.lastName }}, {{ user.firstName }}</li>
 </ng-container>
</ul>
</div>

组件代码 #

results = of(this.res);

locations$: Observable<any>;
permissions$: Observable<any>;
constructor() {
this.locations$ = this.results.pipe(map((x) => x.locations));
this.permissions$ = this.results.pipe(
  map((x) => x.permissions),
  tap((data) => {
    data.sort((a, b) => (a.lastName > b.lastName ? 1 : -1));
  })
);
}

getPermissions(data) {
return this.permissions$.pipe(
  map((permission) =>
    permission.filter((x) => {
      return x.entity.uuid === data.uuid;
    })
  )
);
}

解决方案 #

要实现用户排序且保留permission的所有属性，只需在处理permissions$时，对每个permission对象的users数组单独排序，同时保留原对象的其他属性：

修改后的组件代码 #

results = of(this.res);

locations$: Observable<any>;
permissions$: Observable<any>;
constructor() {
this.locations$ = this.results.pipe(map((x) => x.locations));
this.permissions$ = this.results.pipe(
  map((x) => x.permissions),
  // 对每个permission的users数组按姓名排序，同时保留其他属性
  map(permissions => permissions.map(permission => ({
    ...permission,
    // 复制users数组后排序，避免修改原数据
    users: [...permission.users].sort((userA, userB) => {
      const fullNameA = `${userA.lastName}, ${userA.firstName}`;
      const fullNameB = `${userB.lastName}, ${userB.firstName}`;
      // 使用localeCompare处理字母排序，支持多语言
      return fullNameA.localeCompare(fullNameB);
    })
  })))
);
}

getPermissions(data) {
return this.permissions$.pipe(
  map((permission) =>
    permission.filter((x) => {
      return x.entity.uuid === data.uuid;
    })
  )
);
}

说明 #

• 使用扩展运算符...permission保留原对象的所有属性（如entity、name）；
• 通过[...permission.users]复制用户数组，避免直接修改原数据引发的副作用；
• 用localeCompare替代简单的字符串比较，更符合字母排序规范，还支持多语言场景；
• 排序逻辑基于用户的lastName, firstName完整姓名，确保排序结果准确。

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