javascript - Angular:从标签中应用 ngif

Question

我必须迭代 View 中显示的图像数组。每 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

您可以使用

*ngFor="让 img of imgs; 让 i = 索引"

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

(i+1) % 3 === 0

由于 i 是零索引，因此使用此 bool 值，您可以使用 *ngIf 应用一个类或另一个 div