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

【问题标题】：Using comma as a list separator in Angular 2在 Angular 2 中使用逗号作为列表分隔符
【发布时间】：2016-03-07 08:24:54
【问题描述】：

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

one, two, three

如何使用 Angular 2 的模板语法来实现这一点？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

这对我有用：

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

【讨论】：

你是上帝赐予的。

【解决方案2】：

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

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

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

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>

【讨论】：

【解决方案3】：

我认为更简单的方法是

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

【讨论】：

如果您需要用字符将每个字符串括起来，例如双引号，您可以使用：<span> "{{ items.join('", "') }}" </span>
当我将此解决方案与覆盖自定义对象的 toString() 方法结合使用时，它对我不起作用。但它确实是原始类型的最短解决方案。
如果您需要使用管道转换项目，如何在此处插入管道（例如，价格对象数组，如 [{amount: 1, currency: 'USD'}, {amount: 2, currency: 'GBP'}] 到 $1, £2？
@izogfif 您应该创建另一个 stackoverflow 问题，并可能在此处发布链接。无需详述，使用 javascript 构建字符串。您不必在{{ }} 内使用管道。
试过这样做，如果重复我的整个数组test: string[]= ['apple', 'banna', 'mango', 'orange', 'pear']; span *ngFor="let fruit of test">{{test.join(", ")}}</span> 产生：苹果，版纳，芒果，橙，梨，版纳，芒果，橙，梨，版纳，芒果，橙，梨，版纳, 芒果, 橙子, 梨子, 版纳, 芒果, 橙子, 梨L

【解决方案4】：

我更喜欢 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

【讨论】：

您也可以使用$last 属性。这是example
谢谢@EricMartinez，我还没有看到。我会更新我的答案。
当前语法：当然使用 let 表示 *ngFor，但也用于 #isLast：<span *ngFor="let item of items; let isLast=last">