如何在 angular 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"

我想将姓名显示为：

Person, Artist, Performing Artist, Production Artist

现在显示为（没有space）：

Person,Artist,Performing Artist,Production Artist

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

Answer 1

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

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

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

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);
  }
}

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

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

angular

angular-pipe