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中使用local variables available，例如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>

有关演示，请参见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时标题显示在左侧，并且图像向右对齐。

使用ngFor的替代列顺序

2 个答案: