Стилизация NgFor по горизонтали

Question

Как отображать по горизонтали каждую <ng-container> директивы * ngFor.

У меня есть:

<div *ngIf="hasFinished">
    <ng-container *ngFor="let champ of champStats">
      <h2> {{champ[1].name}} </h2>
      <p> Level: {{champ[1].Level}} </p>
      <p> XP: {{champ[1].XP}} </p>
      <p> Time lost: {{champ[1].CharacterTimePlayed}} </p>
      <p> Wins: {{champ[1].CharacterWins}} </p>
      <p> Loosses: {{champ[1].CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>

    </ng-container>
  </div>

Я использую загрузчик, я хочу, чтобы каждый элемент занимал столбец4 (как 3 первых в ряду, 3 после другого ряда и т.д. ...)

Точно так же:

<div class="row">
    <ng-container class="col-lg-4> ...
    </ng-container>
    <ng-container class="col-lg-4> ...
    </ng-container>
    <ng-container class="col-lg-4> ...
    </ng-container>
</div>
<div class="row">
    <ng-container class="col-lg-4> ...
    </ng-container>
    //...
</div>

РЕДАКТИРОВАТЬ: Другая проблема: if there is 7 elements, how to manage the last one? (for example)

Answer 1

Вы можете сгруппировать два элемента div (class = "row") с внутренними элементами div (class = "col-lg-4") , используя <ng-container>.

<ng-container *ngFor="let champ of champStats">

    <div class="row">
        <div class="col-lg-4">
           {{ champ.prop1 }}
        </div>
        <div class="col-lg-4">
           {{ champ.prop2}}
        </div>
        <div class="col-lg-4">
           {{ champ.prop3 }}
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4>
           {{ champ.prop4 }}
        </div>
        <div class="col-lg-4>
           {{ champ.prop5 }}
        </div>
        <div class="col-lg-4>
           {{ champ.prop6 }}
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4>
           {{ champ.prop7 }}
        </div>
    </div>

</ng-container>

И обратите внимание, что <ng-container> не отображает ни один DOM-элемент в angular, что означает, что присвоение любого атрибута html этой директиве не имеет смысла.

Answer 2

Этого можно добиться с помощью CSS3 flex

HTML:

  <div class="horizontal" *ngIf="hasFinished">
    <ng-container *ngFor="let champ of champStats">
      <p> Name: {{champ.name}} </p>
      <p> Level: {{champ.Level}} </p>
      <p> XP: {{champ.XP}} </p>
      <p> Time lost: {{champ.CharacterTimePlayed}} </p>
      <p> Wins: {{champ.CharacterWins}} </p>
      <p> Loosses: {{champ.CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>

    </ng-container>
  </div>

CSS:

.horizontal {
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
}

p {
    display: inline-block;
    flex-grow: 1;
    height:100px;    
    width: calc(100% * (1/4) - 10px - 1px)
}

Answer 3

Вы можете использовать display: flex в CSS как:

HTML

<div class="horizontal" *ngIf="hasFinished">
    <div *ngFor="let champ of champStats">
      <h2> {{champ[1].name}} </h2>
      <p> Level: {{champ[1].Level}} </p>
      <p> XP: {{champ[1].XP}} </p>
      <p> Time lost: {{champ[1].CharacterTimePlayed}} </p>
      <p> Wins: {{champ[1].CharacterWins}} </p>
      <p> Loosses: {{champ[1].CharacterLosses}} </p>
      <p> XP : {{champ.CharacterRanked2v2Wins}} </p>
      <p> XP : {{champ.CharacterRanked2v2Losses}} </p>
    </div>
</div>

CSS

.horizontal {
    display: flex;
    justify-content: space-between;
}