如何在Angular中将API返回的嵌套数组转换为逗号分隔列表？

你可以通过以下几种方式实现需求：

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

在组件类中添加一个 getter 方法，提取 some_relation 里的 name 属性并拼接成逗号分隔的字符串：

// 组件类代码
get formattedRelationNames(): string {
  // 用安全导航操作符避免空值报错，空数组时返回空字符串
  return this.some_response?.some_relation?.map(item => item.name).join(', ') || '';
}

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

<small>{{ formattedRelationNames }}</small>

方法二：自定义管道（推荐多处复用场景） #

如果多个组件都需要类似的字符串拼接逻辑，可以自定义一个 Angular 管道：

1. 生成并实现管道：

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

@Pipe({ name: 'join' })
export class JoinPipe implements PipeTransform {
  transform(arr: any[], prop?: string, separator: string = ', '): string {
    if (!arr || arr.length === 0) return '';
    // 如果传入属性名，提取对应属性值；否则直接使用数组元素
    const targetValues = prop ? arr.map(item => item[prop]) : arr;
    return targetValues.join(separator);
  }
}

2. 在模块中声明这个管道，确保组件能使用它：

@NgModule({
  declarations: [JoinPipe],
  // ...其他配置
})
export class YourModule { }

3. 在模板中使用管道：

<small>{{ some_response.some_relation | join:'name' }}</small>

还可以自定义分隔符，比如用分号分隔：{{ some_response.some_relation | join:'name':'; ' }}

方法三：模板内直接处理（简单场景快速实现） #

如果只是临时需求，也可以直接在模板中处理，但要注意空值安全：

<small>
  {{ some_response?.some_relation?.map(item => item.name).join(', ') || '' }}
</small>

这种方式逻辑简单但会让模板包含过多业务逻辑，不推荐复杂场景使用。

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