Angular 7 如何将API返回的逗号分隔分类拆分为多个独立按钮

可以根据项目的场景需求，从以下三种实现方案中选择适配的方式：

方案一：模板直接拆分字符串（零TS改动） #

适合快速上线、页面性能要求不高的场景，不需要修改组件逻辑，直接在模板遍历表达式里完成字符串拆分：

• 核心逻辑：借助split(',')方法把原字符串拆成数组，提前做判空处理，避免字段为空时调用方法报错
• 模板代码示例（完全兼容Angular7语法）：

<mat-card-actions>
  <button 
    *ngFor="let category of (subEntry.Category ? subEntry.Category.split(',') : [])" 
    mat-stroked-button 
    color="primary"
    style="float: left; margin-right: 8px;">
    {{ category.trim() }}
  </button>
</mat-card-actions>

• 方案优缺点：
  • 优点：改动量最小，无需编写组件代码
  • 缺点：每次Angular变更检测触发时都会重复执行split计算，长列表场景下会产生不必要的性能开销；对带前后空格的分类内容需要手动加trim处理

方案二：组件层预处理数据（性能最优） #

适合长列表、性能敏感的场景，把拆分逻辑放在组件TS代码里，拿到接口返回数据时一次性完成拆分、清洗：

• 核心逻辑：在组件里定义专门的分类数组属性，数据赋值时完成拆分、去空、格式清洗
• 组件TS代码示例：

// 组件类内定义可遍历的分类数组
categoryList: string[] = [];

// 接口返回数据处理逻辑
this.subEntry = responseData;
this.categoryList = this.subEntry.Category
  ? this.subEntry.Category.split(',')
      .map(item => item.trim()) // 去除分类前后的多余空格
      .filter(item => !!item) // 过滤空值，避免生成空白按钮
  : [];

• 模板代码示例：

<mat-card-actions>
  <button 
    *ngFor="let category of categoryList" 
    mat-stroked-button 
    color="primary"
    style="float: left; margin-right: 8px;">
    {{ category }}
  </button>
</mat-card-actions>

• 方案优缺点：
  • 优点：拆分逻辑仅在数据加载时执行一次，无重复计算的性能损耗；可灵活扩展去重、格式转换、分类映射等自定义逻辑
  • 缺点：需要少量TS代码改动

方案三：封装自定义管道（高复用性） #

适合项目内多处需要展示同类逗号分隔分类的场景，把拆分逻辑封装成可全局复用的Angular管道：

• 核心逻辑：实现带容错处理的拆分管道，统一处理空值、空格、空字符串的场景
• 管道代码示例：

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

@Pipe({ name: 'splitList' })
export class SplitListPipe implements PipeTransform {
  transform(value: string, separator: string = ','): string[] {
    if (!value || typeof value !== 'string') return [];
    return value.split(separator)
      .map(item => item.trim())
      .filter(item => !!item);
  }
}

• 模板使用示例（无需修改组件TS逻辑）：

<mat-card-actions>
  <button 
    *ngFor="let category of (subEntry.Category | splitList)" 
    mat-stroked-button 
    color="primary"
    style="float: left; margin-right: 8px;">
    {{ category }}
  </button>
</mat-card-actions>

• 方案优缺点：
  • 优点：逻辑全局复用，和组件业务逻辑解耦，后续修改拆分规则只需调整管道内代码即可
  • 缺点：单一场景下会增加少量代码量，需要在所属模块中注册该管道

补充说明：原有样式使用float: left布局时，建议给每个按钮加上margin-right: 8px的边距，避免多个按钮紧贴在一起影响视觉效果；所有方案都做了空值容错，当Category字段为null、undefined时不会生成空白按钮。

内容的提问来源于stack exchange，提问作者A. B