使用 ngFor 交替列顺序

Question

如何使用 ngFor 改变每一行的列顺序？

例如这里的图片总是在右边。我该怎么做才能在每一行中交替显示图像，左边一个，右边一个，依此类推？

<div class="row" *ngFor="let servicio of servicios">
  <div class="col-lg-5">
    {{ servicio.titulo }}
  </div>
  <div class="col-lg-7">
    <img src="{{ servicio.imagen }}" alt="">
  </div>
</div>

Answer 1

我不是 css 的专家，但我认为使用 ngClass

可以实现您想要的

您需要进行这些更改。

<div class="row" *ngFor="let servicio of servicios; let i = index">
  <div class="col-lg-5" [ngClass]="{'align-left': i % 2 == 0, 'align-right': i%2 != 0}">
  {{ servicio.titulo }}
</div>
<div class="col-lg-7">
  <img src="{{ servicio.imagen }}" alt=""
       [ngClass]="{'align-left': i % 2 != 0, 'align-right': i%2 == 0}">
</div>

请注意，它们是 "switched"，当 i % 2 == 0 时标题显示在左侧，图像向右对齐。

Answer 2

您可以在 *ngFor 中使用 local variables available，例如 even 和 odd，用两个 ngIf 指令交替列的顺序.其中一个使 titulo 成为具有偶数索引的行的第一列，另一个使它成为具有奇数索引的行的最后一列。

<div class="row" *ngFor="let servicio of servicios; let even=even">
  <div *ngIf="even" class="col-lg-5">
    {{ servicio.titulo }}
  </div>
  <div class="col-lg-7">
    <img src="{{ servicio.imagen }}" alt="">
  </div>
  <div *ngIf="!even" class="col-lg-5">
    {{ servicio.titulo }}
  </div>
</div>

有关演示，请参阅 this stackblitz。

使用 ngFor 交替列顺序

Alternate column order using ngFor

bootstrap-4

ngfor

angular