Angular中如何为ngFor循环的中间元素添加类或设置默认类

嘿，这个问题其实很容易搞定，Angular的*ngFor已经给我们提供了足够的变量来判断元素位置，结合类绑定就能轻松实现需求！

方案1：直接为中间元素绑定专属类 #

你可以利用!first && !last这个条件，给既不是第一个也不是最后一个的元素添加专属类。直接在现有代码基础上扩展即可：

<div 
  *ngFor="let cat of item['catagory']; let first = first; let last = last"
  [class.article_cat_first]="first" 
  [class.article_cat_last]="last"
  [class.article_cat_middle]="!first && !last"
> 
  {{cat['title']}} 
</div>

这样首尾元素会分别带上article_cat_first和article_cat_last类，中间所有元素都会自动加上article_cat_middle类。

方案2：设置默认类（更灵活的多类管理方式） #

如果想给所有元素先加一个默认类，再让首尾元素额外添加特殊类，用ngClass指令会更清晰，它支持对象形式的类绑定逻辑：

<div 
  *ngFor="let cat of item['catagory']; let first = first; let last = last"
  [ngClass]="{
    'article_cat_default': true,  // 所有元素都拥有这个默认类
    'article_cat_first': first,   // 第一个元素额外添加该类
    'article_cat_last': last      // 最后一个元素额外添加该类
  }"
> 
  {{cat['title']}} 
</div>

这种情况下，首尾元素会同时拥有默认类和特殊类，你可以通过CSS优先级来控制样式的覆盖逻辑。如果不想默认类出现在首尾元素上，只需要把默认类的条件改成!first && !last即可：

[ngClass]="{
  'article_cat_default': !first && !last,
  'article_cat_first': first,
  'article_cat_last': last
}"

小提示 #

另外注意到你写的catagory可能是拼写笔误，正确单词应该是category，不过这不会影响代码运行，只是提一下避免后续维护时混淆~

内容的提问来源于stack exchange，提问作者Mark