2
votes

Angulaire - Ajouter div toutes les 3 lignes

J'essaie d'ajouter

toutes les 3 lignes dans ngFor

Voici comment je le fais

<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="clearfix"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>
<div class="col-sm-4 food-menu-col"></div>

Cela l'ajoute toutes les 3 lignes, mais il ajoute également après la première ligne, le code génère le code HTML suivant.

<ng-container *ngFor="let foodMenu of item['food_menus']; index as i;">
    <div class="col-sm-4 food-menu-col"></div>
    <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

angular

0 commentaires

4 Réponses :

3
votes

changer div clearfix en

<div *ngIf="i % 3 == 2" class="clearfix"></div>

2 commentaires

Cela marche. Je me demande pourquoi ma condition n'a pas fonctionné et cela a fonctionné.

index i commence à 0,1,2,3,4,5, ... donc la valeur de i% 3 est respectivement "0,1,2,0 , 1,2, ... "donc i% 3 == 2 est vrai pour i = 2, 5, .... Dans votre condition i% 3 == 0 le vrai était pour i = 0,3,6, ... (donc pour la ligne de départ i = 0 aussi)

1
votes

Selon vos besoins. Vous voulez ajouter le div à la troisième ligne.

Remplacez simplement l'index par i; par let i = index + 1; .

<ng-container *ngFor="let foodMenu of item['food_menus']; let i = index + 1;">
   <div class="col-sm-4 food-menu-col"></div>
<div *ngIf="i % 3 == 0" class="clearfix"></div>

0 commentaires

2
votes

L'index commence par 0, c'est pourquoi il n'est pas tous les tiers. Essayez ceci:

<ng-container *ngFor="let foodMenu of [1,2,3,4,5,6,7]; index as i;">
    <div class="col-sm-4 food-menu-col">{{foodMenu}}</div>
    <div *ngIf="(i + 1 )% 3 == 0" class="clearfix">I am added only every third one</div>
</ng-container>

démo p >

3 commentaires

En fait, c'est similaire à ma réponse supprimée. Je viens de réaliser que OP ne déclare pas systématiquement après le 3ème élément. "Cela l'ajoute toutes les 3 lignes" puis dans le paragraphe suivant "Je veux que le div clearfix soit ajouté toutes les 3 lignes." :(

Cela ajoute clearfix div toutes les 2 lignes au lieu de toutes les 3.

Vous voulez dire que ça devrait être tous les trois?

1
votes

Prenez 'i' comme variable dans la boucle for, il commencera la valeur de 'i' à partir de 1.

<ng-container *ngFor="let element of item; let i;">
  <div class="col-sm-4 food-menu-col"></div>
  <div *ngIf="i % 3 == 0" class="clearfix"></div>
</ng-container>

0 commentaires