Question

我正在使用离子离子图标

<ion-icon name="checkmark" [class]="condition ? 'class1' : ''"></ion-icon>

如果条件为真，我想添加一个额外的类，但如果条件为假，则不要添加额外的类。

问题是，如果条件为false，它会从Ionic Framework中删除图标上的所有预定义类。

Answer 1

尽量避免直接绑定到class。

使用

[class.class1]="condition"

或

[ngClass]="condition ? 'class1' : ''"

通过绑定到class，您可以显式绑定整个属性值，而不是单个类。

Answer 2

试试这个

HTML

<ion-icon name="checkmark" ng-class="myClass()"></ion-icon>

在控制器中

$scope.myClass = function(){
  if(condition ==  true){
     return class1;
  } else{
     return class2;  
  }
}

Answer 3

也许这是一个“老歌”，但这是我解决问题的方式，以防有人正在寻找如何有条件地将类附加到现有类的示例。

基本上，我想保留fa引导程序类，并且仅在侧栏是否折叠时才将人字形从右更改为左。也可以使用字符串文字和三进制，但是比较混乱，这种方式要好得多（我认为）。

<button (click)="showHideSideClicked()">
    <span class="fa" [ngClass]="{'fa-chevron-left': isSideNavVisible, 'fa-chevron-right': !isSideNavVisible}"></span>
</button>

有关它的更多信息@ NgClass

使用条件[class]将类添加到现有类

3 个答案: