我在组件的导出类中有iconCheck: string;
,然后在构造函数中我有this.iconCheck = "add_circle";
,在我的导出类中也有这个。
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>