角2：クリックイベントに基づいて要素にngClassを追加する

Question

Clickedクラスは、一度に1つのクリックされた要素にのみ適用されます。他の要素をクリックすると、最初にクリックされた要素はそのクラスを持たなくてはなりません。それはこの特定の要素にちょうど似ているはずです。コンポーネントで

.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>

Answer 1

<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

Answer 2

：

// 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; 
} 

これにより、一度に1つのアイテムだけがクリックされます。私はループを使用しているので、そのクリックされた状態をオブジェクトに保存することができます。それは人生を楽にします。