Применяя класс CSS условно в Angular2

Question

У меня есть код HTML, который рекурсивно создает элементы списка на основе списка, возвращаемого из Component, и я хочу применить класс 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 нуждается в условии, чтобы знать, следует ли устанавливать этот класс на элемент. Вы можете использовать встроенный index, который поставляется с ngFor.

Попробуйте это:

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