Angular 2将相同的点击事件绑定(bind)到多个元素

Question

我的组件导出类中有 iconCheck: string; 然后在构造函数中我有 this.iconCheck = "add_circle"; 并且在我的导出类中有

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

现在我在我的 HTML 中有多个可折叠/可展开的，我正在使用 Bootstrap Accordion 。上面我使用的是 +/- 图标切换。例如，第一次所有 Accordion 都关闭并有 + 图标，但是当我单击任何一个时，它应该打开并且图标应该更改为 (-)。现在我在上面的 typescript 代码中遇到的问题是，当我点击任何一个 Accordion 时，所有其他 Accordion 图标也会变成 (-) 图标。我需要找到一种方法将点击事件绑定(bind)到我点击的那个特定事件。我不确定什么是正确的词以及如何解释，但在其他方面我需要一个范围限制，或者正如我所说的将点击事件绑定(bind)到特定的点击元素。这是我的 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>

Answer 1

我遇到过几次这个问题。通常我使用某种索引来跟踪用户单击/打开了哪个 Accordion ，并使用该提示来切换图标。

我创建了这个简单的 Plunker演示。看看这是不是你要找的:)

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