web-dev-qa-db-fra.com

Utilisation de Angular2 ngFor index

J'ai ce code:

<div class="row list-group">
  <div *ngFor="let product of products" >
    <app-product [product]="product"></app-product>
  </div>
</div>

Je me demandais s'il y avait un moyen de récupérer des produits d'un tableau dans des seaux? Quelque chose comme ça:

<div class="list-group">
  <div *ngFor="products; index+3" >
    <div class="row">
      <app-product [product]="products[index]"></app-product>
      <app-product [product]="products[index+1]"></app-product>
      <app-product [product]="products[index+2]"></app-product>
    </div>
  </div>
</div>

De cette façon, je pourrais avoir tous les éléments dont j'ai besoin dans une rangée

UPD

Grâce à Teddy Sterne, j'ai trouvé cette solution:

<div class="list-group">
  <div *ngFor="let product of products;let i = index">
    <div class="row" *ngIf="i%3===0">
      <app-product [product]="products[i]"></app-product>
      <div *ngIf="products[i + 1]">
        <app-product [product]="products[i + 1]"></app-product>
      </div>
      <div *ngIf="products[i + 2]">
        <app-product [product]="products[i + 2]"></app-product>
      </div>
    </div>
  </div>
</div>
htmlloopsangularindexing
29
Константин Токарев

Angular ne fournit pas cette fonctionnalité par défaut. Je pense que le moyen le plus simple d’atteindre le résultat souhaité est d’afficher uniquement les données sur tous les trois index, comme ceci:

<div class="list-group">
  <div *ngFor="let p of products; let idx = index" >
    <div class="row" *ngIf="idx % 3 === 0">
      <app-product [product]="products[idx]"></app-product>
      <app-product [product]="products[idx+1]"></app-product>
      <app-product [product]="products[idx+2]"></app-product>
    </div>
  </div>
</div>

démo

49
Teddy Sterne

Pour index essayer ceci:

Fonction d'ajout de fichier contrôleur:

chunks(array, size) {
  let results = [];
  while (array.length) {
    results.Push(array.splice(0, size));
  }
  return results;
};

Dans votre fichier de vue:

<div *ngFor="let chunkProduct of chunks(products,3);" >
  <div class="row">
      <app-product *ngFor="let product of chunkProduct" [product]="product"></app-product>
  </div>
</div>

Cela fonctionnera pour tous les nombres, pas seulement% 3.

La solution de @Teddy Sterne fonctionnera au cas où le nombre indiqué est% 3. Si nous avons 8 produits, seuls les 6 derniers perdus seront perdus.

Et cela créera des balises div vierges supplémentaires pour non% 3 index, si vous inspectez l’élément et que vous cochez la case, car il va parcourir chaque produit et div sera répété peu importe si son index est% 3 ou non.

4
Vivek Doshi

Merci Teddy Sterne pour sa réponse.

Voici comment cela m'a aidé à créer un contrôle de calendrier ayant 7 cellules d'affilée

<div class="container-fluid">
  <table class="table table-bordered">
    <ng-container *ngFor="let d of data; let i = index" >
      <tr *ngIf="i % 7 === 0">
        <td *ngFor="let x of [i,i+1,i+2,i+3,i+4,i+5,i+6]">
          {{data[x]}}
        </td>
      </tr>
    </ng-container>
  </table>      
</div>

DÉMO

https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html

1
purvin