时间戳

首页 > 解决方案 > 根据数组Angular中的位置删除和添加类

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

问题描述

我正在使用 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]但是我似乎无法仅更改第一项的样式，有什么建议吗？

标签： javascriptangulartypescriptangular5

解决方案

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

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

推荐阅读