Angular中为何无法在*ngFor中链式带参数调用sort()？

问题原因 #

Angular的模板表达式语法不支持在模板内直接传递箭头函数作为sort()的参数，这就是你遇到解析错误的核心原因。

解决方案 #

把排序逻辑移到组件的TypeScript代码中，不要直接在HTML模板里写复杂的排序函数参数，下面提供两种实用方案：

方案1：使用Getter返回排序后的数组

在组件类里定义一个getter属性，专门返回按name升序排序后的数组：

// 组件类中的代码
labels: { id: string; name: string }[] = [];

get sortedLabels() {
  // 先复制原数组避免修改原始数据，再按name字段升序排序
  return [...this.labels].sort((a, b) => a.name.localeCompare(b.name));
}

然后在HTML模板中直接使用这个getter：

<div *ngFor="let label of sortedLabels">{{label.name}}</div>

方案2：获取API数据时直接排序

如果数据是从API获取的，可以在订阅响应后立即完成排序，再赋值给组件的数组变量：

// 组件类中调用API的代码
this.yourApiService.getLabels().subscribe(data => {
  // 复制API返回的数据并排序
  this.labels = [...data].sort((a, b) => a.name.localeCompare(b.name));
});

此时HTML模板无需额外处理，直接遍历labels即可：

<div *ngFor="let label of labels">{{label.name}}</div>

补充说明 #

用localeCompare()替代a.name > b.name ? 1 : -1更靠谱，它能正确处理包含特殊字符、不同语言的字符串排序，避免出现不符合预期的排序结果。

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