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

您可以使用可用的局部变量,例如even和odd,*ngFor以使用两个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>

有关演示,请参阅此stackblitz.