如何在角度 7 中使用带有 [ngClass] 的 if-else 条件？ [复制]答案

【问题标题】：How to use if-else condition with [ngClass] in angular 7? [duplicate]如何在角度 7 中使用带有 [ngClass] 的 if-else 条件？ [复制]
【发布时间】：2019-12-03 09:26:57
【问题描述】：

我想在 Angular [ngClass] 中使用多个类。我有两个类，它应该根据标志的条件相应地工作，它们已经从 component.ts 传递过来。

【问题讨论】：

欢迎来到stackoverflow！您需要与一些代码共享更多信息。请环顾四周并通读help center。特别是How do I ask a good question?

标签： angular ng-class

【解决方案1】：

这样做：

<div [ngClass]="condition ? 'class1' : 'class2' " ></div>

（三元运算符用法）

【讨论】：

救命稻草！谢谢

【解决方案2】：

您可以通过多种方式做到这一点：

第一：

[class.my-class]="step=='step1'"

第二个：

[ngClass]="{'my-class': step=='step1'}"

第三个：

[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

第四个：

[ngClass]="(step=='step1')?'my-class1':'my-class2'"

您可以通过link 获得更多帮助

【讨论】：

【解决方案3】：

html：

  <div [ngClass]="{'class1' : value == 1, 'class2' : value == 2}">
      ....................... 
  </div>

   by using a function
  <div  [ngClass]="getClass(2)">
    .......................

  </div>

ts：

export class AppComponent  {
value = 1;

getClass(value){
  if(value == 1) return 'class1'
  else if(value == 2) return 'class2'
}
}

【讨论】：

【解决方案4】：

你可以这样做 [ngClass]="{'class1':condition1, 'class2':condition2}".

【讨论】：

也可以添加conditionMatch ? true : false等条件。

【解决方案5】：

你可以试试[ngClass]="condition ? 'checked' : 'unchecked'"或[ngClass]="[condition ? 'checked' : 'unchecked']"

【讨论】：