我如何在 angular 7 中使用 *ngFor 在第一个 div 中添加活动 class？

Question

我有 carousel-item 个重复 *ngFor 的 div，现在我想在第一个 div (carousel-item) 中添加 active class。如何在 angular 7 中添加类？

component.html

 <div class="carousel-item" *ngFor="let testimonial of getTestimonial">
       <p>{{testimonial.description}}</p>
        <p class="font-weight-bold font-italic t-name">{{testimonial.name}} - {{testimonial.profession}}</p>
  </div>

Answer 1

尝试：

<div class="carousel-item" [class.active]="i===0" *ngFor="let testimonial of getTestimonial; let i=index">
      // your stuff ..
  </div>

工作 stackblitz 示例。

Answer 2

 <div class="carousel-item" *ngFor="let testimonial of getTestimonial; let isFirst = first"  [class.active]="isFirst">

Answer 3

<div class="carousel-item" *ngFor="let testimonial of getTestimonial;let i=index" [ngClass]="{'active': i == 0}">
   <p>{{testimonial.description}}</p>
    <p class="font-weight-bold font-italic t-name">{{testimonial.name}} - {{testimonial.profession}}</p>

试试这个。

Answer 4

你也可以使用 ngClass 这样的东西：

<div  class="carousel-item" 
      [ngClass]="{'active': isFirst }" 
      *ngFor = "let testimonial  of getTestimonial; let isFirst = first;">
        {{testimonial.title}}  {{testimonial.description}}
</div>

我如何在 angular 7 中使用 *ngFor 在第一个 div 中添加活动 class？

How can i add active class in first div using *ngFor in angular 7?

typescript

angular

angular7