Angular项目中如何去除数组渲染时产生的多余逗号

问题解决方法 #

你当前的问题核心是两点：

1. 每个演员字段末尾自带逗号，直接拼接会出现连续逗号
2. 你写的removeCommas方法不生效：一是join()不会修改原数组、只会返回新字符串，二是该方法针对全局actors变量，没有处理每个电影单独的演员列表。

推荐两种实现方案，按需选择即可：

方案1：请求数据时统一预处理（推荐，性能更好）

修改getMovies方法，在拿到接口返回数据时直接处理所有电影的演员字段：

getMovies(): void {
  this.fetchApiData.getAllMovies().subscribe((response: any) => {
    // 遍历处理每部电影的演员列表
    this.movies = response.map(movie => {
      // 先去掉每个演员末尾的逗号，再用顿号拼接（可自行改成你要的分隔符，比如', '）
      const formattedActors = movie.Actors.map(actor => actor.replace(/,$/, '')).join('、');
      // 给处理后的电影对象加个格式化后的字段，不破坏原始数据
      return {...movie, formattedActors };
    });
  });
}

然后修改HTML模板里的演员展示部分：

<mat-card-subtitle>主演：{{movie.formattedActors}}</mat-card-subtitle>

方案2：模板调用方法处理（适合小数据量场景）

在ts类里新增一个公共处理方法：

// 放在MovieCardComponent类里
formatActors(actors: string[]): string {
  return actors.map(actor => actor.replace(/,$/, '')).join('、');
}

直接在HTML模板里调用这个方法即可：

<mat-card-subtitle>主演：{{formatActors(movie.Actors)}}</mat-card-subtitle>

特殊情况：如果movie.Actors是已经拼接好的带多余逗号的字符串

把上面代码里的处理逻辑替换成下面的即可：

// 把连续多个逗号替换成1个，再去掉末尾的逗号
formattedActors = movie.Actors.replace(/,+/g, ',').replace(/,$/, '');

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