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

【问题标题】：Add [ngClass] only on the element that is clicked on仅在被点击的元素上添加 [ngClass]
【发布时间】：2021-06-15 14:28:27
【问题描述】：

我有几列需要区分，当单击某一列以仅在该列上激活该类时，如果激活不同的列以取消激活前一列并激活该列。

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%);
    }

clickEvent(){

this.status = !this.status;

}

点击前是这样的：

点击后是这样的：

因此，如果我只点击一个，它应该会变成紫色，而不是全部，如果一个是紫色，但我点击另一个不是“活动”的图标，它应该会变成紫色，而前一个活动的图标会变回黑色。

【问题讨论】：

标签： html sass ionic3 angular5 ng-class

【解决方案1】：

这是什么，Angular 对吧？

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

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

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

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

【讨论】：

【解决方案2】：

我最终通过遵循Apply ng-class only on the element that was clicked on 中的答案并将其调整为 angular5 来实现这一点。

控制器

isActive = [false, false, false, false, false, false];

clickEvent(index: number) {
  if (!this.isActive[index]) {
    this.isActive = new Array(false, false, false, false, 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>

【讨论】：