Question

我正在尝试将已激活的班级显示为活动中，但无法正常工作进入该班级半秒钟然后回来，我已经尝试过类似的事情。

 <ion-row   >


        <ion-col  col-3 (click)="deviceType('Light')" ><div class="circle-text " [ngClass]="{'active-class': (selectedItem == 'Light')}"><div class="circle-inside"><ion-icon name="custom-icon-lights"></ion-icon></div></div><div class="circle-head-txt">Lights</div></ion-col>
        <ion-col col-3 (click)="deviceType('Ac')"><div class="circle-text" [ngClass]="{'active-class': (selectedItem == 'Ac')}"><div class="circle-inside"><ion-icon name="custom-icon-ac"></ion-icon></div></div><div class="circle-head-txt">AC</div></ion-col>
        <ion-col col-3 (click)="deviceType('Sensor')"><div class="circle-text" [ngClass]="{'active-class': (selectedItem == 'Sensor')}"><div class="circle-inside"><ion-icon name="custom-icon-humidity"></ion-icon></div></div><div class="circle-head-txt">Sensors</div></ion-col>
        <ion-col  col-3 (click)="deviceType('Camera')"><div class="circle-text" [ngClass]="{'active-class': (selectedItem == 'Camera')}"><div class="circle-inside"><ion-icon name="custom-icon-camera"></ion-icon></div></div><div class="circle-head-txt">Camera</div></ion-col>

 </ion-row>

这是我的.ts文件，我默认将selectedItem设置为Light

  deviceType(type: string) {
    this.selectedItem = type;

    if(type == "Light"){
      this.navCtrl.setRoot(LightPage);
    }else if(type == "Sensor"){
      this.navCtrl.setRoot(SensorsPage);
    } else if(type == "Camera"){
      this.navCtrl.setRoot(CameraPage);
    }else if(type == "Ac"){
      this.navCtrl.setRoot(AcPage);
    }else if(type == "Rgb"){
      this.navCtrl.setRoot(RbglightPage);
    }else if(type == "Fan"){
      this.navCtrl.setRoot(FanPage);
    }else if(type == "Curtain"){
      this.navCtrl.setRoot(CurtainPage);
    }
    else {

        this.deviceTypeChild.emit(type);
    }


  }

这是scss文件

  .active-class:after {
    background: #dbdff1!important;
  }

Answer 1

尝试另一种方式

[class.active-class]="selectedItem == 'Light'"

ngClass无法通过点击激活课程吗？

1 个答案: