Question

我必须迭代视图中显示的图像数组。每3个图像应用一个特定的div。手动我一直这样做：

<div class="logos w-slider" data-animation="fade" data-autoplay="1" data-delay="4000" data-duration="500" data-infinite="1">
  <div class="w-slider-mask">
    <br>
    <div class="w-slide">
      <div class="clientes w-row" align="center">
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/assets/img/postgres.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/php2.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/serversql.png">
        </div>
      </div>
    </div>
    <div class="w-slide">
      <div class="clientes w-row">
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/img/hibernate.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/java2.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/jquery.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/json.png">
      </div>
    </div>
    <div class="w-slide">
      <div class="clientes w-row">
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 18%; height: 100%; text-align:center;"><img src="assets/img/bootstrap-logo.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/typescript.png">
        </div>
        <div class="w-col w-col-2 w-col-small-4 w-col-tiny-4" style="float:left; width: 16%; height: 100%;"><img src="assets/img/ajax.png">
        </div>
      </div>
    </div>
  </div>
</div>

但是，我想将这些图像放在一个文件中，然后使用angular动态运行它。问题是某些div我只需要每3个使用一次，但我不知道该怎么做，因为ngIf对我不起作用。

我想知道Angular是否有办法做到这一点。

在PHP中我使用了这样的东西：

@if（条件）在这里我会添加div @endif

这里我会迭代图像

@if（条件）这里会关闭div @endif

Answer 1

您可以使用

final_list

然后你可以使用i变量来检测它是否是第3个，使用

*ngFor="let img of imgs; let i = index"

因为我是零索引，使用此布尔值，您可以使用* ngIf

应用一个类或另一个div

Angular：从标签中应用ngif

1 个答案: