Angular：使用帶* ngIf的類

Question

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

t是一個字符串。我想有這樣的元素，如果i == 0：

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

而這種元素如果i > 0：

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

Answer 1

我喜歡用[class.####]符號對於這種事情。

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

您也可以先使用。

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

Answer 2

你可以試試這個：

<li *ngFor="let t of todos; let i = index" class="list-group-item" [class.active]="i==0" >{{ 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>