Angular2でCSSクラスを条件付きで適用する

Question

コンポーネントから返されたリストに基づいてリストアイテムを再帰的に作成するHTMLコードがあります。最初のリストアイテムのみに 'first-child' CSSクラスを適用します。

<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}">