如何在 *ngFor 中的数组元素之间放置逗号？答案

【问题标题】：How can I put a comma between elements of an array in *ngFor?如何在 *ngFor 中的数组元素之间放置逗号？
【发布时间】：2020-09-28 06:58:07
【问题描述】：

我想知道如何在数组元素之间放置逗号，而行尾没有逗号。有类似的问题，但我的有点不同，因为我使用 *ngFor 指令来显示文本：

<span *ngFor="let style of styles">
    {{style}} //If I put a comma after the text, there would be a comma at the end of the line after the  
              //last element was displayed
<span>

有什么方法可以解决我的问题？

【问题讨论】：

标签： javascript html angular typescript angular-directive

【解决方案1】：

您可以使用来自*ngFor 的last 值：

<span *ngFor="let style of styles; let last = last">
  {{style}}<ng-container *ngIf="!last">,</ng-container>
<span>

或者您可以使用来自*ngFor 的first 值：

<span *ngFor="let style of styles; let first = first">
  <ng-container *ngIf="!first">,</ng-container> {{style}}
<span>

【讨论】：

啊！我不知道存在这样的价值观。谢谢！

【解决方案2】：

带有join function 的JS 方法（或本例中的TS）。这样，当您在模板中时，字符串在单词之间已经有逗号。例如：

const str = ['one','two','three'];
const newStr = str.join(',');
console.log(newStr);//will output: one,two,three

Angular 的方法是在模板中使用 join 函数。在我看来，这是最易读的选项

<span>{{styles.join(',')}}</span>

【讨论】：

感谢您展示解决我问题的其他可能性！
欢迎您。当然这个方法可以嵌入指令 {{styles.join(',')}}
他可以在模板中使用它，无需循环：{{ styles.join(',') }}。
@connorsFan 这是我上一条评论的想法，不知道为什么我在指令中而不是在模板中编写。
我建议相应地修改您的答案。它将帮助未来的读者。