Javascript 基于数组中的位置删除和添加类

我正在使用angular 5创建一个博客页面，其中每个博客文章都有一个类：

col-md-4

                <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>

然而，我想要的是最新的博客文章（即页面上的第一篇）的类别：

col-md-12

                <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>

我拥有的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>

{{blog.fields.authorInfo}
{{blog.fields.title}
{{blog.fields.description}
                <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>

---

我已尝试访问

数组[0]

的索引，但我似乎无法仅更改第一项的样式，有什么建议吗？

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

                <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>

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

---

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

                <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>

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

]*ngFor=“让博客成为博客；var i=index”class=“博客文章”ng class=“i==0？”col-md-12”）：ng:///PagesModule/BlogPageComponent。html@25：10解析器错误：绑定不能在ng:///PagesModule/BlogPageComponent中[let blog of blogs；var i=index]的第28列包含赋值。html@25：10（“lass=”我===0？'col-md-12'：'col-md-4'>刚刚意识到我需要let而不是var，但是现在所有的博客文章都有col-md-12类，没有一篇文章有col-md-4类使用[ngClass]而不是ng类为我做的，以防万一其他人也有同样的问题！]*ngFor=“let blog of blogs；var i=index”class=“blog posts“ng class=“i==0？”col-md-12”）：ng:///PagesModule/BlogPageComponent。html@25：10解析器错误：绑定不能在ng:///PagesModule/BlogPageComponent中[let blog of blogs；var i=index]的第28列包含赋值。html@25：10（“lass=”i==0？'col-md-12'：'col-md-4'“>刚刚意识到我需要let而不是var，但是现在所有的博客文章都有col-md-12类，没有一篇文章有col-md-4类使用[ngClass]而不是ng-class为我这样做，以防万一其他人也有同样的问题！