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

您可以在*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 以获取演示。

Answer 2

我不是 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>

注意它们是“切换”的，当i % 2 == 0 和图像向右对齐时，标题显示在左侧。