javascript - 根据数组 Angular 中的位置删除和添加类

Question

我正在使用 Angular 5 创建一个博客页面，其中每个博客文章都有以下类:

col-md-4

但是，我想要的是最新的博客文章(即页面上的第一篇)具有以下类:col-md-12。

我的html如下:

                <div *ngFor="let blog of blogs" 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="">

            <!-- <button (click)="goToBlogDetailsPage(blog.sys.id)"class="btn btn-info">Open Blog Post</button> -->
          </div>
        </div>
                    </div>
                </div>
            </div>

我尝试访问array[0]的索引，但是我似乎无法仅更改第一个项目的样式，有什么建议吗？

Answer 1

使用索引和三元运算符设置类

<div *ngFor="let blog of blogs; let ind = index" class="blog-posts"
  [ngClass]="ind === 0 ? 'col-md-12' : 'col-md-4'" >