1
votes

Le meilleur moyen de boucler le 4 angulaire avec des colonnes bootstrap?

Je veux boucler ma liste dans les colonnes bootstrap.

Dans la première ligne, je voudrais afficher trois colonnes
Dans la deuxième ligne, je voudrais afficher deux colonnes
Dans la troisième ligne, je souhaite afficher une seule colonne

Le code est ci-dessous.

<div *ngFor="let watch of List;let i = index;" >  
    <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

Il affiche chaque colonne sur une seule ligne. Ne s'affiche pas comme trois, deux et un.

angular bootstrap-4

3 commentaires

avez-vous défini

avant ngFor?

@Robert Si nous définissons la ligne avant ngFor, toutes les colonnes s'affichent sur une seule ligne.

Ensuite, vous avez probablement besoin d'une autre boucle pour les lignes.

3 Réponses :

0
votes

Bonjour, il vous manque la classe "row" en vous * ngFor-div:

<div class="row" *ngFor="let watch of List;let i = index;" >  
   <div [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
     style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
</div>
   <div>{{watch.value}}</div>
</div>

0 commentaires

1
votes

"Si nous définissons la ligne avant ngFor, toutes les colonnes s'affichent sur une seule ligne."

Pas si vous ajoutez [ngClass] au même élément qui est en cours d'itération: p>

[ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 < 1)

Vous n'avez pas non plus besoin de ces champs rowType , vous pouvez faire quelque chose comme ceci:

<div class="row">  
    <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
         style="text-align:center; background-color:rgb(0, 183, 255);">{{watch.name}}
    </div>
    <div>{{watch.value}}</div>
</div>

2 commentaires

[ngClass] = "{'col-xs-4 col-sm-4 col-md-4 col-lg-4': (index / 3 <1) pour trois colonnes cela fonctionnera et les deux et simples colonnes pouvons-nous utiliser cela?

Bien sûr, je faisais juste un exemple. Vous pouvez changer un peu la condition, je suis sur un mobile maintenant, donc je ne peux pas vraiment coder correctement.

0
votes

Peut être div avec {{watch.value}} devrait être à l'intérieur de

 comme ça?             <div *ngFor="let watch of List;let i = index;" [ngClass]="{'col-xs-4 col-sm-4 col-md-4 col-lg-4': watch.rowtype == 'three-view', 'col-xs-6 col-sm-6 col-md-6 col-lg-6': watch.rowtype == 'two-view',  'col-xs-12 col-sm-12 col-md-12 col-lg-12': watch.rowtype == 'one-view'}"
                 style="text-align:center; background-color:rgb(0, 183, 255);">
                 <div>{{watch.name}}<div>
                 <div>{{watch.value}}</div>
            </div>

0 commentaires