Question

我有一个用逗号分隔的列表，其中显示了四个项目的数组。

我想做的是这样：

item1
item1, item2
item1, item2, item3
item1, item2, item3, item4 ...

这是怎么回事：

item1,
item1, item2,
item1, item2, item3,
item1, item2, item3, item4 ...

这是我的代码：

<span *ngFor="let item of record.referrerItemList; let i=index">
    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i < 3">&#44;&nbsp;</span>
    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>
</span>

以下是一些列表结果：

Item1,  Item2,  Item3,  Item4 …
Item1, 
Item1,  Item2,  Item3,  Item4 …
Item1,  Item2,

Answer 1

您可以使用*ngFor的{{1}}导出的值来避免在最后一个元素上添加逗号：

last

有关更多信息，请参见https://angular.io/api/common/NgForOf。

Answer 2

在您的示例中，如果列表的长度超过四个项目，您似乎想消除最后的逗号并使用省略号。

您可以使用last导出的模板变量来检测您是否在最后一个元素上。这是要测试的最佳条件，以防止在最后一个元素之后显示分隔符。

您可以使用SlicePipe显示最多四个项目，并在最后一个元素中检测是否需要省略号，因为源数组的长度大于四个。

如果列表中只有四个项目，则示例中的行为将不会显示省略号。您可以根据需要进行更改。

<span *ngFor="let item of record.referrerItemList | slice:0:4; let $last=last">
    {{item}}
    <span *ngIf="!$last; LastElem" class="list-format">&#44;&nbsp;</span>
    <ng-template #LastElem>
        <span *ngIf="record.referrerItemList.length > 4" class="hellip-format">
            &hellip;
        </span>
    </ng-template>
</span>

Answer 3

只需稍作更改，就可以代替i < 3 i!=record.referrerItemList.length-1，因为只有最后一个您不希望使用逗号。

<span *ngFor="let item of record.referrerItemList; let i=index">
    <span *ngIf="i <= 3">{{item}}</span><span class="list-format" *ngIf="i!=record.referrerItemList.length-1">&#44;&nbsp;</span>
    <span *ngIf="(i > 3) && (i < 5)" class="hellip-format">&hellip;</span>
</span>

用角ngfor和ngif逗号分隔的列表

3 个答案: