J'aimerais ajouter une ligne sur chaque 2 éléments de la boucle ngFor, mais je n'ai pas pu le gérer. J'ai un tableau studentNames comme ci-dessous

studentNames=[
    {
    name:"Jonas",
    age:22,
    number:"1234"
  },
      {
    name:"Mathilda",
    age:25,
    number:"5432"
  },
      {
    name:"Jacob",
    age:20,
    number:"4321"
  },
      {
    name:"Ivan",
    age:23,
    number:"6984"
  },
      {
    name:"Kate",
    age:21,
    number:"3432"
  },
      {
    name:"James",
    age:20,
    number:"4312"
  },
      {
    name:"Sean",
    age:23,
    number:"4321"
  },
      {
    name:"Julia",
    age:23,
    number:"4321"
  },
  ]

Voici ce que j'ai essayé

<ng-container *ngFor="let item of studentNames;let i=index">
  <div class="row" *ngIf="i%2==0">
    <div class="col md-12">
      {{item.name}}
    </div>
  </div>
</ng-container>

Ceci n'est ignoré que lorsque l'index n'est pas pair. Voici comment je veux les voir ci-dessous (l'ordre n'a pas d'importance seulement devrait être de 2 par 2 par ligne).

enter image description here

Exemple de Stackblitz: https://stackblitz.com/edit/bootstrap -wpfukz? file = app% 2Fapp.component.html

0
Timuçin Çiçek 31 août 2020 à 17:40

2 réponses

Meilleure réponse

C'est une approche un peu plus "hacky" mais c'est uniquement HTML:

<ng-container *ngFor="let item of studentNames;let i=index">
    <div *ngIf="i%2==0">
        <div class="row">
            <div class="col md-12">
                {{studentNames[i].name}}
            </div>
            <div class="col md-12">
                {{studentNames[i + 1].name}}
            </div>
        </div>
    </div>
</ng-container>
1
Zer0 31 août 2020 à 14:54

Vous pouvez essayer comme ci-dessous. Utilisez la *ngFor valeur exportée index et utilisez la moitié de la longueur du tableau pour continuer la boucle

<ng-container *ngFor="let item of studentNames; let j = index;">
  <ng-container *ngIf="j < (studentNames.length / 2)">
    <div class="row">
      <div class="col md-6">
        {{item.name}}
      </div>
      <div class="col md-6">
        {{ studentNames[ j + (studentNames.length / 2) ].name }}
      </div>
    </div>
  </ng-container>
</ng-container>

Fonctionnement de stackblitz

Remarque: La longueur du tableau doit être un nombre pair;)

0
Sivakumar Tadisetti 31 août 2020 à 17:24