J'ai commencé il y a quelques mois à utiliser Angular pour mes projets et j'ai une situation où j'ai besoin de quelques conseils.
J'utilise Bootstrap4 et je dois créer une ligne pour chaque 3 éléments stockés dans un tableau. Le tableau a une taille dynamique, donc si mon tableau contient 21 éléments, je dois créer 7 lignes avec 3 éléments par ligne.
J'ai trouvé de nombreuses questions sur ce sujet mais je ne sais pas quelle solution utiliser.
Les meilleures solutions à ce jour:
Quelqu'un a-t-il utilisé une solution? Ou il y a quelque chose de mieux qui a été introduit avec les dernières versions d'Angular?
Merci d'avance!
3 Réponses :
Mon conseil est d'utiliser une approche différente. Si vous utilisez bootstrap flexbox Wrap , et avec une largeur fixe, vous pouvez toujours utilisez un seul * ngFor et le résultat sera généré avec des "sauts de ligne" tous les 3 éléments (si vous le forcez à tenir 3 éléments d'affilée).
Donc, quelque chose comme ceci:
<div class="d-flex flex-wrap" style="width: 300px"> <div *ngFor="let item of myArrayOfItems style="width: 10px"> ... </div> </div>
De cette façon, il est beaucoup plus facile d'étendre la fonctionnalité pour d'éventuelles futures lignes plus courtes également (par exemple dans une interface utilisateur réactive et adaptée aux mobiles)
p >
C'est intéressant. Mais je ne sais pas quoi dire sur la largeur fixe.
il convient mieux au problème, vous pouvez toujours utiliser un pourcentage de largeur à la place, je crois.
Avez-vous essayé cette solution avec des pourcentages?
Ça ne marche pas comme je veux. J'irai avec la solution 1
Donc en gros, vous avez un tableau avec une taille dynamique, disons: ["1", "2", "3", "4", "5"] .
Ce que vous voulez faire, c'est en quelque sorte avoir un tableau qui contient un ou plusieurs tableaux de N valeurs comme: [["1", "2", "3"], ["4", "5"] ] .
Pour ce faire, vous pouvez utiliser cet extrait de code:
var arrayOfData: string[] = ["1", "2", "3", "4", "5"]; var group = groupArray(arrayOfData, 3); console.log(group); // displays: ["1", "2", "3"], ["4", "5"]
Maintenant, pour l'utiliser, appelez-le simplement comme ceci:
function groupArray<T>(data: Array<T>, n: number): Array<T[]> {
let group = new Array<T[]>();
​
for (let i = 0, j = 0; i < data.length; i++) {
if (i >= n && i % n === 0)
j++;
group[j] = group[j] || [];
group[j].push(data[i])
}
​
return group;
}
En angulaire, vous pouvez maintenant créer un * ngFor sur le tableau group pour construire les lignes, puis un autre * ngFor pour construire les colonnes.
Soyez prudent sur le dernier tableau pensé, vous pourriez ne pas avoir la longueur correcte en fonction de la taille de votre tableau d'origine. Vous devrez "compléter" le dernier tableau avec des valeurs vides ou ce que vous voulez.
J'espère que cela vous aidera.
Eastral, pour dactylographié, remplacez "var" par "let" et supprimez "function" dans votre fonction
Oui. c'est une solution. Il en va de même avec le point 2 de ma question. Je vous ferai savoir si j'utiliserai cette approche.
Vous pouvez utiliser lodash pour créer un tableau d'éléments divisés en groupes de la longueur de la taille. _.chunk (array, [size = 1])
Ou utilisez
let arr = [1,2,3,4,5,6,7,8];
let chunk_size = 3; //no. of elements you want to print in single row
let chunkArray = arr.map(function(e, i) {
return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
})
.filter(function(e) {
return e;
});
<div class="row" *ngFor="let data of chunkArray ">
<div class ="col-md-4" *ngFor="let item of data">
{{item.name}}
</div>
</div>
Quelle est ta question? Vous voulez avoir des lignes contenant chacune 3 éléments? Utilisez simplement
col-4pour chaque élément.Je vais adapter ma question, mais si j'ai 21 éléments dans mon tableau. Je souhaite créer une nouvelle ligne pour chaque 3 éléments.
Encore une fois, utilisez simplement
col-4pour chaque élément. bootply.com/o7m8Xv0eiASi je comprends bien, vous avez un tableau avec une taille dynamique, disons:
["1", "2", "3", "4", "5"]et que vous souhaitez afficher ce tableau dans une table avec 3 droits de colonnes?@Eastrall, oui. Dans votre cas, une ligne aura 1, 2, 3 et la deuxième ligne: 4, 5