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

Question

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

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这是一个例子class。每个 class 都有相同的东西，只是 class 个不同的名字。

.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;

}

点击之前是这样的：

点击后是这样的：

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

Answer 1

这是什么，Angular对吧？

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

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

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

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

Answer 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>

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

Add [ngClass] only on the element that is clicked on

html

sass

ionic3

angular5

ng-class