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

Question

I have a comma separated list that displays an array of four items.

What I'm trying to do is this:

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

What is happening is this:

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

Here is my code:

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

Here is some list results:

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

Answer 1

You can use *ngFor 's last exported value to avoid adding the comma to the last element:

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

For more info, see https://angular.io/api/common/NgForOf .

Answer 2

In your example you seem to want to eliminate the final commas and have an ellipses if the length of the list exceeds four items.

You can use the last exported template variable to detect if you're on the last element. This is the best condition to test for to prevent displaying a separator after the last element.

You can use the SlicePipe to display up to four items and in the last element detect if you need ellipses because the length of the source array is greater than four.

The behavior in the example will not display ellipses if there are only four items in the list. You can change it if you want.

<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

just a little change should work, in place of i < 3 i!=record.referrerItemList.length-1 will work because only the last one you don't want the comma.

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