角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结合相同的单击事件的多个元素

回答

相关问题