Question

如何在Angular 4中的ngFor循环中为内部元素添加不同的类？说，我有一个片段：

<div *ngFor="let article of articles">
  <div>
    <h3>{{article.name}}</h3>
    <p>{{article.body}}</p>
  </div>
</div>

所以我有两个问题：我如何根据它们的顺序（第一，第二，第三）在每个生成的文章中为h3元素添加不同的类，以及如何基于奇偶命令向h3元素添加类？

Answer 1

您可以在ngForOf中获取当前迭代的索引，奇数甚至是偶数，并将其与ngClass结合使用，然后您可以设置类。

<div *ngFor="let article of articles; index as i; even as isEven; odd as isOdd">
  <div id="article">
    <h3 [ngClass]="{'odd': isOdd, 'even': isEven}">{{article.name}}</h3>
    <p>{{article.body}}</p>
  </div>
</div>

您没有提到如何使用索引/位置，因此没有代码。我相信你可以根据上面的示例代码和文档来确定这一部分。

正如@ Paco0也指出，你可能认为id="article"是id="{{article.id}}"或类似的东西？

在ngFor循环中添加类

1 个答案: