Angular: use a class with *ngIf

Question

<ul class="list-group">
  <li *ngFor="let t of todos; let i = index" class="list-group-item" >{{ t }}</li>
</ul>

t is a string. I want to have this element if i == 0 :

<li class="list-group-item active" >{{ t }}</li>

and this element if i > 0 :

<li class="list-group-item" >{{ t }}</li>

Answer 1

您可以尝试以下方法：

<li *ngFor="let t of todos; let i = index" class="list-group-item" [class.active]="i==0" >{{ t }}</li>

Answer 2

I like to use [class.####] notation for this sort of thing.

 <li *ngFor="let t of todos; let i = index" 
     class="list-group-item"
     [class.active]="i === 0">{{ t }}</li>

You can also use first.

 <li *ngFor="let t of todos; let i = first" 
     class="list-group-item"
     [class.active]="i">{{ t }}</li>

Answer 3

<ul class="list-group">
    <li *ngFor="let t of todos; let i = index" class="list-group-item" >
        <span [class.active]="i==0"> {{ t }} </span>  
    </li>
</ul>