1

我有一个逗号分隔的列表，显示一个包含四个项目的数组。

我想要做的是：

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,
4

3 回答 3

3

您可以使用*ngFor' 的last导出值来避免将逗号添加到最后一个元素：

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

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

于 2018-11-20T13:56:58.880 回答
1

只是一点点改变就可以了，代替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>
于 2018-11-20T14:09:24.030 回答
1

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

您可以使用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>
于 2018-11-20T13:57:10.047 回答