仅在点击的元素上添加 [ngClass]

如何解决仅在点击的元素上添加 [ngClass]

我有几列需要区分，当单击一个列时只激活该类，如果激活另一个列以取消激活前一个并激活该类。

HTML

<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_mobile' : status}" src="assets/icon/ico_device_mobile.svg" height="28"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalMobile }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_tablet' : status}" src="assets/icon/ico_device_tablet.svg" height="30"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalTablet }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_computer' : status}" src="assets/icon/ico_device_computer.svg" height="27"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalComputer }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_tv' : status}" src="assets/icon/ico_device_tv.svg" height="28"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalTv }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_game' : status}" src="assets/icon/ico_device_game.svg" height="20"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalGame }}</span></ion-col>
<ion-col (click)="clickEvent()"><img [ngClass]="{'ico_device_other' : status}" src="assets/icon/ico_device_other.svg" height="23"><span [ngClass]="{'colorSecondary' : status}">{{ liveBoxDeviceEditCms.literalOther }}</span></ion-col>

SCSS 这是一个类的示例。每个类都有相同的东西，只是类名不同。

.ico_device_mobile {
        mask: url(/assets/icon/ico_device_mobile.svg);
        mask-repeat: no-repeat;
        filter: invert(26%) sepia(46%) saturate(3365%) hue-rotate(303deg) brightness(90%) contrast(104%);
    }

TS

clickEvent(){

this.status = !this.status;

}

点击前的样子：

点击后是这个样子：

所以如果我只点击一个它应该变成紫色而不是所有的，如果一个是紫色但我点击另一个不是“活动”的图标它应该变成紫色，而前一个活动的图标又变回黑色。

>

解决方法

这是什么，Angular，对吗？

所以这里的问题是所有这些图标都在检查变量“状态”是真还是假。所以现在，正如你所解释的，要么所有的图标都是黑色的，要么是粉红色的。

您应该为图标创建一个组件，然后循环遍历它们。像这样的东西，我不习惯有角度，但像这样：

<IconComponent ng-repeat="Icon in IconArray" ng-click="toggleActive(Icon)">
    {{Icon}}
</IconComponent>

您可以在此处阅读更多信息：https://angular.io/tutorial/toh-pt2

,

通过遵循 Apply ng-class only on the element that was clicked on 中的答案并将其调整为 angular5，我终于做到了这一点。

控制器

isActive = [false,false,false];

clickEvent(index: number) {
  if (!this.isActive[index]) {
    this.isActive = new Array(false,false);
    this.isActive[index] = true;
  }
}

HTML

<ion-col (click)="clickEvent(0)"><img [ngClass]="{'test' : isActive[0]}" src="assets/icon/ico_device_mobile.svg" height="28"><span [ngClass]="{'colorSecondary' : isActive[0]}">{{ liveboxDeviceEditCms.literalMobile }}</span></ion-col>
<ion-col (click)="clickEvent(1)"><img [ngClass]="{'test' : isActive[1]}" src="assets/icon/ico_device_tablet.svg" height="30"><span [ngClass]="{'colorSecondary' : isActive[1]}">{{ liveboxDeviceEditCms.literalTablet }}</span></ion-col>