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

How to print an array in comma separated string in angular html

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

我想将姓名显示为:

Person, Artist, Performing Artist, Production Artist

现在显示为(没有space):

Person,Artist,Performing Artist,Production Artist

angular中是否有内置管道可用于显示此类数据?

你可以使用Array.prototype.join(注意逗号后的白色space)

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

这将打印数组中的所有元素,用逗号和白色分隔 space。

为了尽量减少应用程序的负载,您还可以考虑创建管道。

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

变换函数如下所示:

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