如何在角度html中以逗号分隔的字符串打印数组答案

【问题标题】：How to print an array in comma separated string in angular html如何在角度html中以逗号分隔的字符串打印数组
【发布时间】：2020-09-24 00:10:52
【问题描述】：

我必须在 HTML 的 json 中显示一个解析数组：

 <p class="personaType">{{cardData.names}}</p>

名字在哪里

names: Array(5) 0:"Person" 1:"Artist" 2:"Performing Artist" 3:"Production Artist" 4:"Visual Artist" 5:"Intermedia Artist"

我想将名称显示为：

人物、艺术家、表演艺术家、制作艺术家

现在它显示为（无空格）：

人、艺术家、表演艺术家、制作艺术家

是否有任何内置的管道可用于显示此类数据？

【问题讨论】：

标签： angular angular-pipe

【解决方案1】：

你可以使用Array.prototype.join（注意逗号后面的空格）

<p class="personaType">{{cardData.names.join(', ')}}</p>

这将打印数组中的所有元素，以逗号和空格分隔。

【讨论】：

很高兴它有帮助。请注意，这不是 Angular 特有的，只是一个标准的 JS 数组方法
是的，我能理解。但它不是黑客？正确的？这是一个正确的方法吗？
@Simer 这绝对不是黑客攻击
嘿，我试了一下，得到：ERROR TypeError: _v.parent.context.$implicit.se.join is not a function
这不是 hack，但请参阅下面的答案，了解如何在 Angular 中实现更高性能。

【解决方案2】：

为了最大限度地减少应用程序的负载，您还可以考虑创建管道。

就用法而言，它可能看起来像这样：<p>{{ cardData.names|join:', ' }}</p>。

转换函数如下所示：

@Pipe({
  name: 'join'
})
export class JoinPipe implements PipeTransform {
  transform(input:Array<any>, sep = ','): string {
    return input.join(sep);
  }
}

【讨论】：

老实说应该是公认的答案，尽管这个例子可以更加充实。
@crush 我把整个管道放在那里。如果您有其他想法，请告诉我。