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>