如何在 *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

您可以使用 *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>

Answer 2

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

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

Angular 方法是使用模板里面的join函数。我认为这是最易读的选项

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

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

How can I put a comma between elements of an array in *ngFor?

html

javascript

typescript

angular-directive

angular