Angular 2：將ngClass添加到基於單擊事件的元素

我希望Clicked類一次只能應用於一個單擊的元素。點擊其他元素後，第一個點擊的元素不應再有這個類。它應該有點像這個。點擊那個特定的元素。
Click here for the desired output Angular 2：將ngClass添加到基於單擊事件的元素

.rangeContainer{ 
 
    width: 100%; 
 
    height: 46px; 
 
    } 
 
    .range{ 
 
     height: 42px; 
 
     background-color: #F6F6F6; 
 
     color: #035688; 
 
     font-size: 12px; 
 
     font-weight: 800; 
 
     line-height: 46px; 
 
     padding: 15px 20px; 
 
     cursor: pointer; 
 
    } 
 
    .clicked{ 
 
     background-color: white; 
 
     color: #7A232E; 
 
     border-top: 6px solid #7A232E; 
 
    } 
 
    
 
I want the


 
<div class="rangeContainer"> 
 
    <span (click)="click = !click" [ngClass]="{'clicked' : click}" class="range">K4 - K5</span> 
 
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">1ST - 2ND</span> 
 
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">3RD - 4TH</span> 
 
    <span (click)="click = !click" [ngClass]="{'clicked' : click}"class="range">5TH - 8TH</span> 
 
</div>

來源

2017-05-25 Asif Karim Bherani

<span 
    *ngFor="let range of ['K4 - K5', '1ST - 2ND', '3RD - 4TH', '5TH - 8TH']; let i = index" 
    (click)="activeIndex = i" 
    [ngClass]="{ clicked : activeIndex === i }" class="range" > 
    {{ range }} 
</span>

Plunker Example

來源

2017-05-25 19:28:26 yurzui

有沒有辦法停用上點擊外的班？這將是非常有幫助的。 –

https://plnkr.co/edit/R7EIv9YfOUpzqCyqhWDS?p=preview – yurzui

令人驚歎！如果你不介意可以解釋$ event.stopPropagation（）做什麼，我可以在任何地方使用它。我用過（click）=「function（$ event）」，但從未使用過$ event.stopPropagation（）。 –

在組分：

// Insert your real labels here 
this.items = [{label: 'item 1'}, {label: 'item 2'}];

然後用*ngFor：

<div class="rangeContainer"> 
    <span *ngFor="let item of items" (click)="toggleClick(item)" [ngClass]="{'clicked' :item.isClicked}" class="range">{{item.label}}</span> 
</div>

然後切換是這樣的：

toggleClick(clickedItem: any): void { 

    for (let item of items) { 
    item.isClicked = false; 
    } 

    clickedItem.isClicked = true; 
}

這將確保一次只能單擊一個項目。我正在使用循環，因此我可以將該單擊的狀態存儲在對象上。它使生活更輕鬆。

來源

2017-05-25 19:26:59 Chrillewoodz

Angular 2：將ngClass添加到基於單擊事件的元素

回答

相關問題