web-dev-qa-db-fra.com

Angular2: ngPour plusieurs objets par ligne dans la table

Mon composant contient un tableau de chaînes que je souhaite afficher dans un tableau. Cependant, je veux que la table ait 4 colonnes par ligne. Comment utiliser * ngFor pour afficher 4 chaînes par ligne?

Je sais qu'il existe des solutions sans utiliser de tables, mais dans ce cas, je suis vraiment intéressé par l'utilisation d'une table.

angularngfor
5
BigTuna99

Avoir à faire une petite transformation à la liste des chaînes, c'est facile, il suffit de placer le tableau à travers une fonction qui crée et retourne un nouveau tableau à afficher

_ PLUNKR de mon exemple ci-dessous

Exemple

my-comp.component.ts 

items: any[] = ["item1","item2","item3","item4","item5","item6","item7","item8","item9"];

buildArr(theArr: String[]): String[][]{

    var arrOfarr = [];
    for(var i = 0; i < theArr.length ; i+=4) {
        var row = [];

        for(var x = 0; x < 4; x++) {
          var value = theArr[i + x];
            if (!value) {
                break;
            }
            row.Push(value);
        }
        arrOfarr.Push(row);
    }
     return arrOfarr;
}

my-comp.component.html 

<table id="myTable" class="table">
    <thead>
        <tr>
             <th>Item1</th>
             <th>Item2</th>
             <th>Item3</th>
             <th>Item4</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of buildArr(items)">
            <td *ngFor="let item of row">{{item}}</td>
        </tr>
    </tbody>
</table>
9
Logan H

Vous pouvez transformer votre tableau de chaînes en un tableau de chaînes:

this.rowList = [];
var stringList = [1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3, 4, 1, 2, 3];
var colCount = 4;
for (var i = 0; i < stringList.length; i = i + 4) {
    var element = stringList[i];
    var row = [];
    while (row.length < colCount) {
        var value = stringList[i + row.length];
        if (!value) {
            break;
        }
        row.Push(value);
    }
    this.rowList.Push(row);
}

Et puis juste utiliser deux ngFor:

<table>
    <tbody>
        <tr *ngFor="let row of rowList">
            <td *ngFor="let col of row">{{col}}</td>
        </tr>
    </tbody>
</table>
2
Guilherme Meireles
<table>
<thead>
   <th>..</th>
<th>..</th>
<th>..</th>
<th>..</th>
</thead>
<tbody>
<tr ng-repeat="for component in components | groupBy: 3">
Data here
</tr>
</tbody>
</table>

Cela nécessitera un module de filtre angulaire/une bibliothèque. J'avais fait la même chose pour Trier des éléments dans AngularJS pour ng-repeat question.

0
Pravin Umamaheswaran