Question

我有carousel-item个div，它们重复通过*ngFor，现在我想在第一个active中添加div (carousel-item)类。如何在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" *ngFor="let testimonial of getTestimonial; let isFirst = first"  [class.active]="isFirst">

Answer 2

尝试：

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

有效的stackblitz示例。

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中添加活动类？

4 个答案: