Angular：带有 *ngClass 的条件类

Angular 2+ 版提供了几种有条件地添加类的方法：

第一类

[class.my_class] = "step === 'step1'"

类型二

[ngClass]="{'my_class': step === 'step1'}"

和多个选项：

[ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

三型

[ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

第四类

[ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

---

[ngClass]=... 而不是 *ngClass。

* 仅用于结构指令的简写语法，例如您可以在其中使用

<div *ngFor="let item of items">{{item}}</div>

而不是更长的等效版本

<template ngFor let-item [ngForOf]="items">
  <div>{{item}}</div>
</template>

另请参阅https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

... ... ... ... ...

另请参阅https://angular.io/docs/ts/latest/guide/template-syntax.html

---

另一种解决方案是使用 [class.active]。

例子 ：

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>

---

ngClass 的正常结构是：

[ngClass]="{'classname' : condition}"

所以在你的情况下，就像这样使用它......

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

---

通过以下示例，您可以使用“IF ELSE”

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">

---

您可以使用 ngClass 有条件地应用类名，而不是在 Angular 中

例如

[ngClass]="'someClass'">

有条件的

[ngClass]="{'someClass': property1.isValid}">

多重条件

 [ngClass]="{'someClass': property1.isValid && property2.isValid}">

方法表达式

[ngClass]="getSomeClass()"

此方法将在您的组件内部

 getSomeClass(){
        const isValid=this.property1 && this.property2;
        return {someClass1:isValid , someClass2:isValid};
    }

---

Angular 提供了多种有条件地添加类的方法：

第一种方式

active 是你的班级名称

[class.active]="step === 'step1'"

第二种方式

active 是你的班级名称

[ngClass]="{'active': step=='step1'}"

第三种方式

通过使用三元运算符 class1 和 class2 是您的类名

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

---

您应该使用类似的东西（[ngClass] 而不是 *ngClass）：

<ol class="breadcrumb">
  <li [ngClass]="{active: step==='step1'}" (click)="step='step1; '">Step1</li>
  (...)

---

在 Angular 7.X

CSS 类更新如下，具体取决于表达式评估的类型：

字符串 - 添加字符串中列出的 CSS 类（空格分隔）

Array - 添加声明为 Array 元素的 CSS 类

Object - 键是 CSS 类，当值中给出的表达式计算为真值时添加，否则将被删除。

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

---

此外，您可以添加 with 方法功能：

在 HTML 中

<div [ngClass]="setClasses()">...</div>

在组件.ts

// Set Dynamic Classes
  setClasses() {
    let classes = {
      constantClass: true,
      'conditional-class': this.item.id === 1
    }

    return classes;
  }

---

扩展 MostafaMashayekhi 他对选项二的回答>您还可以使用“，”链接多个选项

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

*ngIf 也可以用于其中一些情况，通常与 *ngFor 结合使用

class="mats p" *ngIf="mat=='painted'"

---

您可以使用 [ngClass] 或 [class.classname]，两者的工作方式相同。
[class.my-class]="step==='step1'"

  或者

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

两者的工作方式相同！

---

在创建响应式表单时，我必须在按钮上分配 2 种类型的类。我是这样做的：

<button type="submit" class="btn" [ngClass]="(formGroup.valid)?'btn-info':''" 
[disabled]="!formGroup.valid">Sign in</button>

当表单有效时，按钮有 btn 和 btn 类（来自引导程序），否则只有 btn 类。

---

让，YourCondition 是你的条件或布尔属性，然后这样做

[class.yourClass]="YourCondition"

---

我们可以使用以下语法使类动态化。在 Angular 2 plus 中，您可以通过多种方式执行此操作：

[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"

[ngClass]="{'active': step}"

[ngClass]="step== 'step1'?'active':''"

[ngClass]="step? 'active' : ''"

---

ngClass 语法：

[ngClass]="{'classname' : conditionFlag}"

你可以这样使用：

<ol class="breadcrumb">
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

---

这对我有用：

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

---

该指令以三种不同的方式运行，具体取决于表达式计算为三种类型中的哪一种：

如果表达式的计算结果为字符串，则该字符串应该是一个或多个以空格分隔的类名。如果表达式的计算结果是一个对象，那么对于具有真值的对象的每个键值对，对应的键被用作类名。如果表达式的计算结果为数组，则数组的每个元素都应该是类型 1 中的字符串或类型 2 中的对象。这意味着您可以将字符串和对象混合在一个数组中，以便更好地控制出现 CSS 类。有关此示例，请参见下面的代码。

    [class.class_one] = "step === 'step1'"

    [ngClass]="{'class_one': step === 'step1'}"

对于多个选项：

    [ngClass]="{'class_one': step === 'step1', 'class_two' : step === 'step2' }" 

    [ngClass]="{1 : 'class_one', 2 : 'class_two', 3 : 'class_three'}[step]"

    [ngClass]="step == 'step1' ? 'class_one' : 'class_two'"

---

与 [ngClass] 指令无关，但我也遇到了同样的错误

无法读取未定义的属性“删除”...

我认为是我的 [ngClass] 条件下的错误，但结果是我试图在 [ngClass] 条件下访问的属性没有初始化。

就像我在打字稿文件中有这个

element: {type: string};

在我的 [ngClass] 中，我正在使用

[ngClass]="{'active', element.type === 'active'}"

我得到了错误

无法在...读取未定义的属性“类型”

解决方案是将我的财产修复为

element: {type: string} = {type: 'active'};

希望它对尝试匹配 [ngClass] 中的属性条件的人有所帮助

---

代码是 ngClass if else 条件的好例子。

[ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''"

[ngClass]="{'active': active_tab=='assignservice'}"

---

试试这样..

用''定义你的班级

<ol class="breadcrumb">
    <li *ngClass="{'active': step==='step1'}" (click)="step='step1; '">Step1</li>
    <li *ngClass="{'active': step==='step2'}"  (click)="step='step2'">Step2</li>
    <li *ngClass="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

---

对于 elseif 语句（较少比较）使用如下：（例如你比较三个语句）

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>

---

如果用户想根据 && 和 || 显示类然后下面一个对我有用

[ngClass]="{'clasname_1':  condition_1 && condition_2, 'classname_2':  condition_1 && condition2, 'classname_3': condition}"

例子：

[ngClass]="{'approval-panel-mat-drawer-side-left':  similar_toil_mode==='side' && showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-side-right':  similar_toil_mode==='side' && !showsTheSimilarToilsWithCloseIcon, 'approval-panel-mat-drawer-over': similar_toil_mode==='over'}"

---