web-dev-qa-db-fra.com

itération de deux éléments dans une rangée ngPour angulaire

J'ai un tableau de chaînes et je veux placer tous les deux dans une rangée avec ngFor, voici ce que j'ai essayé:

<div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'>
     <div class='col-md-6'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{index}}
               </md-card-title>
             </md-card-header>
          </md-card>
     </div>
     <div class='col-md-6' *ngIf='i+1 < myArray.length'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{myArray[i+1}}
               </md-card-title>
             </md-card-header>
          </md-card>
    </div>
</div>

Mais lorsque j'ajoute un nouvel élément, il duplique l'élément pervios et je ne sous-estime vraiment pas sa raison, alors comment ajouter deux éléments dans chaque ligne avec ngFor

angularangular-material2
6
Daniel.V

Vous pouvez ignorer tous les autres index en cherchant simplement des nombres pairs (0, le premier index est pair) pour * ngIf, et afficher les éléments avec le prochain élément à ignorer (impair):

<div class='row wow fadeInUp' *ngFor='let index of myArray; let i = index; let even = even'>
      <span *ngIf="even">
         <div class='col-md-6' >
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
         </div>
         <div class='col-md-6'>
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i+1]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
        </div>
       </span>
    </div>

EXEMPLE DEMO

10
Vega

ngFor expose odd et even qui peuvent être utilisés pour afficher conditionnellement (à l'aide de ngIf) certains éléments.

<ul>
  <li *ngFor="let item of array; let even = even">
    <ng-container *ngIf="even">{{ item }}</ng-container>
  </li>
</ul>

Cela dit, il est probablement préférable de le faire dans votre code plutôt que dans le modèle. C'est plus clair, testable et plus performant.

evenItems = array.filter((_, index) => index % 2 == 0)

Ensuite, passez en boucle sur ceux-ci.

<ul>
  <li *ngFor="let item of eventItems">
    {{ item }}
  </li>
</ul>
1
Lazar Ljubenović