如何在Angular的*ngFor循环中动态绑定featured_destination1至8 CSS类？

这事儿其实很常见，我来给你捋捋怎么快速搞定～你的类名是按数字顺序排列的（featured_destination1到8），刚好可以利用*ngFor自带的索引变量来动态生成。

核心思路 #

*ngFor循环里可以通过let i = index拿到当前项的索引（注意索引是从0开始的），我们只需要把索引加1，再和固定的类名前缀拼接，就能精准匹配你需要的8个类了。

具体实现方式 #

方式1：直接用[class]属性绑定（最直接）

这种方式适合你的destinations数组长度刚好是8的场景，代码简洁明了：

<div *ngFor="let destination of destinations; let i = index" 
     class="box" 
     [class]="'featured_destination' + (i + 1)">
  <div class="img-wrapper">
    <img class="featured_img" src="https://d2aixmiphfue7s.cloudfront.net/fimages/{{destination.FeatureImage}}">
  </div>
  <div class="gradient">
    <div class="boxcontent">
      <!-- 你的其他内容 -->
    </div>
  </div>
</div>

这里(i + 1)把从0开始的索引转换成1-8的数字，和前缀拼接后就正好是你需要的featured_destination1到featured_destination8。

方式2：用[ngClass]绑定（更灵活）

如果你的destinations数组长度可能超过8，不想给第9个及以后的元素加这些类，可以用ngClass做条件判断，避免生成多余的类：

<div *ngFor="let destination of destinations; let i = index" 
     class="box"
     [ngClass]="{'featured_destination' + (i + 1): i < 8}">
  <!-- 内容同上 -->
</div>

这样只有前8个元素会绑定对应的类，后面的元素只会保留box类，不会出现featured_destination9这种不需要的类名。

小提醒 #

• 记得给(i + 1)加括号，不然字符串拼接会变成featured_destination01这种错误的类名（因为会先把i转成字符串再和1拼接）。
• 如果destinations数组长度不足8，后面的元素不会生成对应的类，要是需要强制补全的话，可以先对数组做截断或补空处理。

内容的提问来源于stack exchange，提问作者JAIME GAFFOD JR