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

Posted 2023-02-22

【中文标题】如何在角度 7 中使用带有 [ngClass] 的 if-else 条件？ [复制]

【英文标题】：How to use if-else condition with [ngClass] in angular 7? [duplicate]

【发布时间】：2019-12-03 09:26:57

【问题描述】：

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

【问题讨论】：

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

【参考方案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']"