我有多个带有切换<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;
}
}
发布于 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
}
发布于 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}}
https://stackoverflow.com/questions/51852946
复制相似问题