J'ai une structure de modèle fixe pour imprimer seulement deux éléments d'affilée comme ci-dessous et je dois itérer en utilisant la directive ngFor:
cityCodes=[{12:'patna'},{23:'jaipur'},{21:'Baliya'},{23:'Canugh'}]
Comme vous pouvez le voir dans le code ci-dessus, j'utilise cityCodes json comme ci-dessous:
<div class="row" *ngFor="let item of cityCodes; let i = index">
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-1">
</div>
<div class="img-text">
{{cityCodes[i].value}}
</div>
</div>
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-2">
</div>
<div class="img-text">
{{cityCodes[i+1].value}}
</div>
</div>
</div>
Comme j'ai une structure fixe comme deux colonnes d'affilée, j'utilise cityCodes [i] et cityCodes [i + 1] pour imprimer le images côte à côte.
Comme j'ai déjà utilisé [i + 1] ème élément dans la première ligne, ngFor recommence avec le même élément dans la ligne suivante. Comment mettre à jour l'index ici.
5 Réponses :
Il semble que vous souhaitiez afficher côte à côte. Vous pouvez le faire en utilisant une propriété css simple columns
Vous aurez essentiellement besoin de deux tableaux, l'un contiendra tous les éléments occupant l'index pair dans le tableau principal et l'autre tous les éléments qui occupent l'index impair.
Puis boucle sur chacun d'eux séparément et utilise la propriété css pour afficher côte à côte
<ul class='ulClass'> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul>
.ulClass {
columns: 2
}
Un peu hack-y mais vous pouvez l'ignorer si le i% 2 === 1
<div class="row" *ngFor="let item of cityCodes; let i = index" *ngIf="i % 2 === 0">
Comment puis-je utiliser l'index (i) hors du div
Enveloppez simplement votre code avec un div et faites les choses conditionnellement comme ci-dessous. Vous pouvez créer la méthode isOdd dans votre fichier ts.
<div class="row" *ngFor="let item of cityCodes; let i = index">
<div *ngIf="isOdd(i)">
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-1">
</div>
<div class="img-text">
{{cityCodes[i].value}}
</div>
</div>
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-2">
</div>
<div class="img-text">
{{cityCodes[i+1].value}}
</div>
</div>
</div>
</div>
À mon humble avis, contrairement à d'autres réponses ici, je pense que la suite devrait suffire.
<div class="row" ; let i = index">
<ng-template ngFor let-item [ngForOf]="cityCodes">
<div class="col-6" (click)="cityClick(item.key)">
<div class="img img-1">
</div>
<div class="img-text">
{{item.value}}
</div>
</div>
</ng-template>
</div>
ou simplement envelopper dans un ng-template
XXX
<div class="row" *ngFor="let item of cityCodes; index as i; first as isFirst; even as isEven">
<ng-container *ngIf="isEven || isFirst">
<div class="col-6 " (click)="cityClick(item.key)">
<div class="border border-primary">
</div>
<div class="border border-primary">
{{i}}
</div>
</div>
<div class="col-6" (click)="cityClick(item.key)" >
<div class="border border-primary">
</div>
<div class="border border-primary">
{{i+1}}
</div>
</div>
</ng-container>
Refer stackblitz code here
Comment puis-je utiliser l'index (i) hors du div dans un autre élément
Quel est le problème? Y a-t-il une erreur?
Duplicata de ngFor avec l'index comme valeur dans l'attribut . Aussi, utilisez simplement ngFor sur le premier div interne et gardez les classes identiques. Ils finiront dans une structure à 2 colonnes.