Dans Angular 5, *ngFor génère <div> éléments dans une direction de colonne au lieu de direction de ligne:

html :

    <div class="charts"  *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn"
          style="padding-top: 0.5em">
          <div class="item">
            <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
            </span>
          </div>
    </div>

css :

    .charts{
      display: flex;
     flex-direction: row;
    }

    .item{
      display: flex;
      flex: 1
    }

Comment puis-je le changer pour que tous les éléments soient dans la même ligne?

Merci

2
larry ckey 14 avril 2020 à 21:50

2 réponses

Meilleure réponse

Vous devez réorganiser comme

<div class="charts" style="padding-top: 0.5em">
      <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
        <span style="background-color: rgb(127, 140, 255); height:120px;"> number {{i}}
        </span>
      </div>
</div>

Le display: flex; flex-direction: row; doit être sur le parent div

1
Shashank Vivek 14 avril 2020 à 19:10

Vous devez ajouter le *ngFor à votre item, pas au charts:

<div class="charts" style="padding-top: 0.5em">
  <div class="item" *ngFor="let chart of chartEntities$ | async; let i = index; trackBy: trackByFn">
    <span style="background-color: rgb(127, 140, 255); height:120px;">
      number {{i}}
    </span>
  </div>
</div>

Sur une note latérale, n'utilisez pas de style en ligne comme ça. Ceux-ci doivent être déplacés vers un fichier css de composant

1
Poul Kruijt 14 avril 2020 à 19:09