Angular HTML中如何用内置管道将数组转为带空格的逗号分隔字符串

当然有办法啦！Angular虽然没有专门的内置管道直接实现「带空格的逗号分隔数组」这件事，但咱们可以用内置工具组合一下，轻松达成你要的效果～

方法1：直接用数组原生join()（最简单省心） #

你可以在模板里直接调用数组的join()方法，把分隔符设成, （逗号加空格），就能得到理想的格式：

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

如果只需要显示数组里的前几个元素（比如你例子里的前4个），再搭配Angular内置的SlicePipe截取就行：

<!-- 截取索引0到3的4个元素，然后用逗号加空格分隔 -->
<p class="personaType">{{ cardData.names | slice:0:4 | join(', ') }}</p>

方法2：用NgFor循环（适合需要自定义样式的场景） #

要是之后想给每个标签加样式，或者做更复杂的处理，就用NgFor循环，再借助last变量控制最后一个元素不显示逗号：

<p class="personaType">
  <span *ngFor="let name of cardData.names; let last = last">
    {{ name }}<span *ngIf="!last">, </span>
  </span>
</p>

同样，要截取元素的话，加上SlicePipe就好：

<p class="personaType">
  <span *ngFor="let name of cardData.names | slice:0:4; let last = last">
    {{ name }}<span *ngIf="!last">, </span>
  </span>
</p>

小提示 #

• join()是JavaScript数组自带的方法，在Angular模板里直接就能用，不用额外写管道或者导入东西。
• SlicePipe是Angular官方提供的内置管道，用来切数组或字符串，语法是slice:起始索引:结束索引，注意结束索引对应的元素是不包含的哦～

这样就能完美输出你想要的「Person, Artist, Performing Artist, Production Artist」格式啦！

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