Angular2+：在多个div中切换元素
Angular2+：在多个div中切换元素
提问于 2018-08-15 12:26:28
我有多个带有切换<i>元素的div。然而，在我的尝试中，当我点击一个div的书签(即fa-<i>)时，它会切换所有其他div对应的<i>。
我想要的是能够在每个单独的div中切换<i>，而不影响其他div的。
我的HTML：
<div class="crit-desc crit-item-flags order-item-flags">
<i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
<i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
</div>
/*Repeat above HTML*/
<div class="crit-desc crit-item-flags order-item-flags">
<i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
<i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
</div>我的TS：
export class FlagsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
items = {
'flag': { flagStatus: false },
'bookmark': { flagStatus: false },
'alarmClock': { flagStatus: false }
};
flagActive(item) {
console.log(this.items[item]);
this.items[item].flagStatus = !this.items[item].flagStatus;
}
}回答 2
Stack Overflow用户
发布于 2018-08-15 12:36:46
您可以在一个div中使用
[hidden]="flag"和其他div中
[hidden]="!flag"并创建一个单击事件
<i class="fal fa-bookmark" (click)="flagActive()"></i> 你的函数看起来像这样
function flagActive(){
this.flag = !this.flag
}Stack Overflow用户
发布于 2018-08-16 10:09:20
如果要重复Div，请使用指令
@Directive({
selector: '[appToggle]',
exportAs:'appToggle'
})
export class ToggleDirective {
toggle:boolean=false;
constructor() { }
@HostListener('click') onClick(){
this.toggle=!this.toggle;
}
}然后为不同的div使用不同的模板变量
<div class="crit-desc crit-item-flags order-item-flags">
<i class="fa fa-bookmark"
appToggle
#bookmark="appToggle"
[ngClass]="bookmark.toggle === true ? 'flagActive' : 'flagNotActive'"></i>
<i class="fa fa-clock-o"
appToggle
#alarm="appToggle"
[ngClass]="alarm.toggle === true ? 'flagActive' : 'flagNotActive'"
></i>
</div>
{{bookmark | json}}
{{alarm | json}}
/*Repeat above HTML*/
<div class="crit-desc crit-item-flags order-item-flags">
<i class="fa fa-bookmark"
appToggle
#bookmark1="appToggle"
[ngClass]="bookmark1.toggle === true ? 'flagActive' : 'flagNotActive'"></i>
<i class="fa fa-clock-o"
appToggle
#alarm1="appToggle"
[ngClass]="alarm1.toggle === true ? 'flagActive' : 'flagNotActive'"
></i>
</div>
{{bookmark1 | json}}
{{alarm1 | json}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51852946
复制相关文章
相似问题
腾讯云开发者
