角2結合相同的單擊事件的多個元素

我有iconCheck: string;在我的組件出口類，那麼內部構造我this.iconCheck = "add_circle";，在我出口類我有角2結合相同的單擊事件的多個元素

iconChange() { 
    if(this.iconCheck == "add_circle") { 
     this.iconCheck = "remove_circle" 
    } else { 
     this.iconCheck = "add_circle"; 
    } 
    }

現在我必須多張收縮/擴張在我的HTML爲此我使用Bootstrap手風琴。以上我正在使用+/-圖標切換。例如，第一次所有的手風琴都被關閉並且帶有+圖標，但是當我點擊時應該打開並且圖標應該改變爲（ - ）。現在我用上面的打字稿代碼的問題是，當我點擊任何一個手風琴時，所有其他手風琴圖標也正在更改爲（ - ）圖標。我需要找到一種方法將點擊事件綁定到我單擊的特定事件上。我不知道什麼是正確的話，如何解釋，但在其他我需要一個範圍限制或正如我說的綁定點擊事件，該特定點擊元素。這裏是我的HTML：

<a data-toggle="collapse" (click)="iconChange()" href="#collapse1"> 
Property 1 
<i class="material-icons pull-right">{{iconCheck}}</i> 
</a> 

<a data-toggle="collapse" (click)="iconChange()" href="#collapse2"> 
Property 1 
<i class="material-icons pull-right">{{iconCheck}}</i> 
</a>

來源

2017-05-25 Sami

我也遇到這個問題幾次。通常我會使用某種索引來跟蹤用戶點擊/打開哪個手風琴，並使用該提示切換圖標。

我已經創建了這個簡單的Plunker演示。看看這是你在找什麼:)

app.ts：

export class App { 
    name:string; 

    selectedIndex: number; 

    constructor() { 
    this.name = `Angular! v${VERSION.full}`; 
    this.selectedIndex = -1; 
    } 

    iconChange(index: number){ 
    if(this.selectedIndex == index){ 
     this.selectedIndex = -1; 
    } 
    else{ 
     this.selectedIndex = index; 
    } 

    } 
}

模板：

<div> 
    <h2>Hello {{name}}</h2> 
    <div class="div1" (click)="iconChange(1)" > 
    Hi 
     <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 1, 'fa-minus': selectedIndex == 1}" aria-hidden="true" style="float: right"></i> 
    </div> 
    <div class="div2" (click)="iconChange(2)"> 
    Hi again! 
     <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 2, 'fa-minus': selectedIndex == 2}" aria-hidden="true" style="float: right"></i> 
    </div> 
    <div class="div3" (click)="iconChange(3)"> 
    Bye! 
     <i class="fa" [ngClass]="{'fa-plus': selectedIndex != 3, 'fa-minus': selectedIndex == 3}" aria-hidden="true" style="float: right"></i> 
    </div> 
</div>

來源

2017-05-25 23:53:42 Nehal

它的工作原理。謝謝：） – Sami

角2結合相同的單擊事件的多個元素

回答

相關問題