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

使用index和ternary运算符设置类

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

根据数组Angular中的位置移除和添加类

1 个答案: