Question

如何水平显示* ngFor指令的每个<ng-container>。

我有：

<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>

我使用bootstrap，我希望每个元素都采用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

您可以在CSS中使用display: flex：

<强> 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;
}

Answer 2

您可以将两个div （class =＆＃34; row＆＃34;）与内部div 分组（class =＆＃34; col-lg-4＆＃34;） 使用<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元素，这意味着为该指令提供任何html属性都是毫无意义的。

Answer 3

您可以通过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)
}

为水平造型Ng

3 个答案: