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添加到基于单击事件的元素

回答

相关问题