有條件地在Angular2中應用CSS類

Question

我有下面的HTML代碼，它基於從Component返回的列表遞歸創建列表項，我想僅將'first-child'CSS類應用於第一個List項。

<ul class="link-list-horz"> 
<li *ngFor="let menu of menulist" [ngClass]="first-child:"> 
<a href="">{{menu}}</a> 
</li> 
</ul> 

.first-child a 
{ 
    border-radius: 10; 
} 

export class AppComponent { 
    name = 'Quiz'; 
    menulist = ['Home','AngularQuiz'] ; 
    useremailid = 'Gaurav-Gupta'; 
} 

請建議。我對Angular2完全陌生。

Answer 1

ngClass需要知道是否在該元素上設置該類的條件。您可以使用ngFor附帶的內置index。

試試這個：

<li *ngFor="let menu of menulist; let i=index" [ngClass]="{'first-child': i === 0}">