給予積極的課onclick在ngFor角2

Question

嗨我有無序列表，他們都有活躍的類。點擊任何列表項時，我想切換活動類。我的代碼是這樣的

<ul class="sub_modules"> 
    <li *ngFor="let subModule of subModules" class="active"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

任何人都可以幫助我做到這一點？

Answer 1

你可以這樣做：

<ul class="sub_modules"> 
    <li (click)="activateClass(subModule)" 
     *ngFor="let subModule of subModules" 
     [ngClass]="{'active': subModule.active}"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

上的分量

activateClass(subModule){ 
    subModule.active = !subModule.active;  
} 

在伍類的第一屬性是你想添加第二個是條件類;

Answer 2

我相信你可以在這裏找到答案：AngularJs - Best-Practices on adding an active class on click (ng-repeat)

您可以定位和應用CSS通過角的$index項/對象。這篇文章比我能解釋和演示邏輯更好。

Answer 3

只是做一個索引屬性。使用let i = index使用（單擊）事件設置索引。然後檢查是否selectedIndex === i如果是集合類「主動」爲真

<ul class="sub_modules"> 
    <li *ngFor="let subModule of subModules; let i = index" 
     [class.active]="selectedIndex === i" 
     (click)="setIndex(i)"> 
    <a>{{ subModule.name }}</a> 
    </li> 
</ul> 

然後在打字稿文件：只需將selectedIndex。

export class ClassName { 
    sIndex: number = null; 

    setIndex(index: number) { 
     sIndex = index; 
    } 
}