Question

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

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

现在我在我的HTML中有多个可折叠/可扩展的，我正在使用Bootstrap手风琴。以上我使用的是+/-图标切换。例如，第一次所有的手风琴都被关闭并且有+图标，但是当我点击任何一个时应该打开，图标应该改为（ - ）。现在我对上述打字稿代码的问题是，当我点击任何一个手风琴时，所有其他手风琴图标也会变为（ - ）图标。我需要找到一种方法将click事件绑定到我单击的特定事件。我不确定哪些是正确的词以及如何解释但在其他方面我需要一个范围限制或者我说将click事件绑定到特定的clicked元素。这是我的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

我几次遇到过这个问题。通常我会使用某种索引来跟踪用户点击/打开的手风琴并使用该提示来切换图标。

我创建了这个简单的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>

Angular 2将相同的单击事件绑定到多个元素

1 个答案: