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

您可以嘗試以下方法：

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

Answer 2

我喜歡對這種事情使用[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 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>