使用角度 ngfor 和 ngif 的逗号分隔列表答案

【问题标题】：Comma separated list using angular ngfor and ngif使用角度 ngfor 和 ngif 的逗号分隔列表
【发布时间】：2018-11-20 22:21:53
【问题描述】：

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

我想要做的是：

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,

【问题讨论】：

我真的看不出你正在尝试做的事情和正在发生的事情之间有什么区别。请具体指出有什么区别。如果您也可以从您的组件中发布一些代码，那也会非常有帮助。
@Sidd 看到顶部井每行末尾的逗号我不想让他们看到两个块之间的区别？
列表长什么样，请分享
是这样的吗[1,2,3,4,5,6,7,8,9]

标签： angular

【解决方案1】：

您可以使用*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。

【讨论】：

【解决方案2】：

只需稍作更改即可，代替 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>

【讨论】：

对不起，这个解决方案不符合问题的要求。
这是我用这个逻辑得到的结果：Item1, Item2, Item3, Item4, , ... , , , Item1 Item1, Item2, Item3, Item4, ...

【解决方案3】：

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

您可以使用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>

【讨论】：

此解决方案也可以修改此评论。谢谢