如何在 *ngFor 中的数组元素之间放置逗号?
Posted
技术标签:
【中文标题】如何在 *ngFor 中的数组元素之间放置逗号?【英文标题】:How can I put a comma between elements of an array in *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>
有什么方法可以解决我的问题?
【问题讨论】:
【参考方案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 这是我上一条评论的想法,不知道为什么我在指令中而不是在模板中编写。
我建议相应地修改您的答案。它将帮助未来的读者。以上是关于如何在 *ngFor 中的数组元素之间放置逗号?的主要内容,如果未能解决你的问题,请参考以下文章