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

Question

我想知道如何在数组的元素之间放置逗号，而行的末尾没有逗号。有类似的问题，但我有点不同，因为我使用*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>解决我的问题的方法是什么？

Answer 1

您可以使用以下值：last*ngFor

<span *ngFor="let style of styles; let last = last">

  {{style}}<ng-container *ngIf="!last">,</ng-container>

<span>

或者，您可以使用以下值：first*ngFor

<span *ngFor="let style of styles; let first = first">

  <ng-container *ngIf="!first">,</ng-container> {{style}}

<span>

Answer 2

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

const str = ['one','two','three'];

const newStr = str.join(',');

console.log(newStr);//will output: one,two,three

角度方法是在模板中使用连接函数。在我看来，这是最易读的选择

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