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

Question

我必须在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"

我想将名称显示为:

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

现在它显示为(没有空格):

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

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

Answer 1

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

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

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

Answer 2

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

它可能是这个样子，至于用法：<p>{{ cardData.names|join:', ' }}</p>。

变换函数看起来像这样：

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