在 Angular 2 中使用逗号作为列表分隔符

Question

我想在我的模板中创建一个项目列表，用逗号分隔，但我不希望最后一个项目有逗号：

one, two, three

如何使用 Angular 2 的模板语法完成此操作？

Answer 1

我更喜欢 Eric 的回答（请参阅他对示例 Plunker 的评论）：

<span *ngFor="let item of items; let isLast=last">
   {{item}}{{isLast ? '' : ', '}}
</span>

我原来的答案是在 NgFor microsyntax:

中使用可选的 index

<span *ngFor="#item of items, #i=index">
   {{item}}{{i === items.length - 1 ? '' : ', '}}
</span>

另一种方法是仅使用 CSS ::before 语法，如下所述：

Answer 2

我认为更简单的方法是

<span> {{items.join(", ")}} </span>

Answer 3

我刚好需要这样做，但我的值在一个属性中，所以标记的答案不起作用。

有人可能会觉得这有帮助：

我用了一根管子，我本来可以把字符串建起来的，但我觉得管子会更易读

CLI

ng g p Delimiter

管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'delimiter'
})
export class DelimiterPipe implements PipeTransform {
  transform(value: string, delimiter: string, isLast: boolean)  {
    return !isLast ? value + delimiter : value;
  }
}

查看

<div ngFor="let item of items; let isLast=last" 
     [innerHtml]="item | delimiter:', ':isLast">
</div>

我认为我需要一些 html 因此我需要使用该属性，例如

<div ngFor="let item of items; let isLast=last" 
     [innerHtml]="item | safeHtml | delimiter:', ':isLast">
</div>

在 Angular 2 中使用逗号作为列表分隔符

Using comma as a list separator in Angular 2

angular2-template

angular