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

我有一个逗号分隔的列表，它显示了一个由四个项目组成的数组

我想做的是：

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>

---

您可以使用

*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>

{{项目}},；
&hellip；

---

有关更多信息，请参见。

您可以使用

*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>

{{项目}},；
&hellip；

---

有关更多信息，请参见。

在您的示例中，如果列表长度超过四项，您似乎希望删除最后的逗号并使用省略号

您可以使用

last

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

您可以使用

切片管

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

如果列表中只有四项，则示例中的行为不会显示省略号。如果你愿意，你可以改变它

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

{{item}}
, 
&hellip；

在您的示例中，如果列表长度超过四项，您似乎希望删除最后的逗号并使用省略号

您可以使用

last

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

您可以使用

切片管

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

如果列表中只有四项，则示例中的行为不会显示省略号。如果你愿意，你可以改变它

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

{{item}}
, 
&hellip；

只要稍微改变一下就可以了，取代

i<3

i=record.refererItemList.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>


{{项目}},；
&hellip；
只要稍微改变一下就可以了，取代
i<3
i=record.refererItemList.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>


{{项目}},；
&hellip；
我看不出你想做的和正在发生的有什么区别。请特别指出两者的区别。如果你也能从你的组件中发布一些代码，那也会很有帮助。@Sidd在每一行的顶端看到逗号，我不想让他们看到这两个块之间的区别？列表是什么样子的，请分享它是这样的
[1,2,3,4,5,6,7,8,9]
我看不出你想做的和正在发生的有什么区别。请特别指出两者的区别。如果你也能从你的组件中发布一些代码，那也会很有帮助。@Sidd在每一行的末尾看到顶部的逗号，我不想让他们看到这两个块之间的区别。列表是什么样子的，请分享它是这样的
[1,2,3,4,5,6,7,8,9]
这个解决方案也适用于此注释。感谢此解决方案也适用于此评论。感谢教授此解决方案不符合问题的要求。这是我使用此逻辑得到的结果：Item1、Item2、Item3、Item4、…、Item1、Item1、Item2、Item3、Item4…很抱歉，此解决方案不符合问题的要求。这是我使用此逻辑得到的结果：Item1、Item2、Item3、Item4、，…，，，项目1，项目1，项目2，项目3，项目4…