J'ai une liste séparée par des virgules qui affiche un tableau de quatre éléments.

Ce que j'essaie de faire, c'est ceci:

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

Ce qui se passe est le suivant:

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

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

Voici quelques résultats de liste:

Item1,  Item2,  Item3,  Item4 …
Item1, 
Item1,  Item2,  Item3,  Item4 …
Item1,  Item2, 
1
nless 20 nov. 2018 à 16:46

3 réponses

Meilleure réponse

Juste un petit changement devrait fonctionner, à la place de i < 3 i!=record.referrerItemList.length-1 fonctionnera parce que seul le dernier dont vous ne voulez pas la virgule.

<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>
1
ashish pal 20 nov. 2018 à 14:19

Vous pouvez utiliser la valeur exportée last de *ngFor pour éviter d'ajouter la virgule au dernier élément:

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

Pour plus d'informations, consultez https://angular.io/api/common/NgForOf.

1
Zircon 20 nov. 2018 à 13:56

Dans votre exemple, vous semblez vouloir éliminer les virgules finales et avoir des ellipses si la longueur de la liste dépasse quatre éléments.

Vous pouvez utiliser la variable de modèle exportée last pour détecter si vous êtes sur le dernier élément. C'est la meilleure condition à tester pour éviter d'afficher un séparateur après le dernier élément.

Vous pouvez utiliser SlicePipe pour afficher jusqu'à quatre éléments et détecter dans le dernier élément si vous avez besoin d'ellipses car la longueur du tableau source est supérieure à quatre.

Le comportement de l'exemple n'affichera pas d'ellipses s'il n'y a que quatre éléments dans la liste. Vous pouvez le changer si vous voulez.

<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>
1
Daniel Gimenez 20 nov. 2018 à 14:21