angular - 在 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 microsyntaxindex中的可选项：

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

另一种方法是仅使用 CSS::before语法，如下所述：https ://stackoverflow.com/a/31805688/215945

Answer 2

我认为更简单的方法是

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

Answer 3

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

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

我用了一根管子，我本来可以把绳子搭起来的，但我觉得管子更易读

命令行界面

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>