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语法，如下所述：https://stackoverflow.com/a/31805688/215945

Answer 2

我认为更简单的方法是

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

Answer 3

这对我有用

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

Answer 4

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

某人可能会发现这很有帮助：

我用了一个管道，本来可以构建字符串，但是觉得管道更易读

CLI

file_name = ET.parse('imports.xml')
myroot = file_name.getroot()
for i in myroot[0]:
    print i.text

管道

print myroot[0].text

查看

ng g p Delimiter

我在视图中需要一些html，因此我需要使用属性，例如

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;
  }
}

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

4 个答案: