Angular 5中如何根据数组索引为首个博客帖子切换CSS类？

嘿，这个需求其实用Angular *ngFor 自带的索引就能轻松搞定！你之前尝试访问数组索引没成功，大概率是没在循环里正确利用索引值来动态切换类。下面给你两种可行的方案：

方案一：使用 [ngClass] 动态绑定类（推荐） #

在 *ngFor 中添加索引变量，然后根据索引判断当前项是否为第一个，动态设置对应的列类：

修改后的HTML代码如下：

<div *ngFor="let blog of blogs; let i = index" 
     [ngClass]="{'blog-posts': true, 'col-md-12': i === 0, 'col-md-4': i !== 0}">
  <div class="card">
    <img class="blog-img" (click)="goToBlogDetailsPage(blog.sys.id)" 
         src="{{blog.fields.blogimage.fields.file.url}}" class="rounded" alt="">
    <div class="info">
      <h3 class="author">{{blog.fields.authorInfo}}</h3>
      <h2 (click)="goToBlogDetailsPage(blog.sys.id)" class="title">{{blog.fields.title}}</h2>
      <p class="short-desc">{{blog.fields.desciption}}</p>
      <img (click)="goToBlogDetailsPage(blog.sys.id)" class="sml-logo" 
           src="/assets/img/logos/logo_blue.png" alt="">
      <!-- <button (click)="goToBlogDetailsPage(blog.sys.id)"class="btn btn-info">Open Blog Post</button> -->
    </div>
  </div>
</div>

解释一下：

• let i = index 会在循环中生成当前项的索引（从0开始）
• [ngClass] 接收一个对象，键是类名，值是布尔值，当值为true时该类会被应用
• 这样第一个帖子（索引0）会应用col-md-12，其余帖子用col-md-4，同时保留通用的blog-posts类

方案二：单独渲染首个帖子 + 循环渲染剩余帖子 #

如果你觉得动态绑定类不够直观，也可以把第一个帖子单独写出来，剩下的用*ngFor循环：

<!-- 首个帖子 -->
<div class="blog-posts col-md-12" *ngIf="blogs.length > 0">
  <div class="card">
    <img class="blog-img" (click)="goToBlogDetailsPage(blogs[0].sys.id)" 
         src="{{blogs[0].fields.blogimage.fields.file.url}}" class="rounded" alt="">
    <div class="info">
      <h3 class="author">{{blogs[0].fields.authorInfo}}</h3>
      <h2 (click)="goToBlogDetailsPage(blogs[0].sys.id)" class="title">{{blogs[0].fields.title}}</h2>
      <p class="short-desc">{{blogs[0].fields.desciption}}</p>
      <img (click)="goToBlogDetailsPage(blogs[0].sys.id)" class="sml-logo" 
           src="/assets/img/logos/logo_blue.png" alt="">
    </div>
  </div>
</div>

<!-- 剩余帖子 -->
<div *ngFor="let blog of blogs.slice(1)" class="blog-posts col-md-4">
  <div class="card">
    <img class="blog-img" (click)="goToBlogDetailsPage(blog.sys.id)" 
         src="{{blog.fields.blogimage.fields.file.url}}" class="rounded" alt="">
    <div class="info">
      <h3 class="author">{{blog.fields.authorInfo}}</h3>
      <h2 (click)="goToBlogDetailsPage(blog.sys.id)" class="title">{{blog.fields.title}}</h2>
      <p class="short-desc">{{blog.fields.desciption}}</p>
      <img (click)="goToBlogDetailsPage(blog.sys.id)" class="sml-logo" 
           src="/assets/img/logos/logo_blue.png" alt="">
    </div>
  </div>
</div>

这种方法的缺点是会有重复代码，所以更推荐第一种方案，代码更简洁易维护。

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