Angular：带*ngClass的条件类

[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

<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>

另见https://angular.io/docs/ts/latest/guide/template-syntax.html

<!-- toggle the "special" class on/off with a property --><div [class.special]="isSpecial">The class binding is special</div>
<!-- binding to `class.special` trumps the class attribute --><div class="special"[class.special]="!isSpecial">This one is not so special</div>

<!-- reset/override all class names with a binding  --><div class="bad curly special"[class]="badCurly">Bad curly</div>

你应该使用这样的东西（[ngClass]而不是*ngClass）：

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

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

示例：

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

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]="{'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>

你可以使用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};}

当我创建一个反应式表单时，我必须在按钮上分配两种类型的类。我是这样做的：

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

当表单有效时，按钮有btn和btn-class（来自bootstrap），否则只有btn class。

这是什么为我工作：

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

扩展MostafaMashayekhi对选项二的回答>您还可以使用 ',' [ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

*ngIF也可以在这些情况下使用，通常与*ngFor结合使用

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

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

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

在Angular 7.X

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

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

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

• 对象-键是CSS类，当值中给出的表达式计算为truthy值时添加，否则它们将被删除。

<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>

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

[class.yourClass]="YourCondition"

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]指令无关，但我也遇到了同样的错误

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

我认为这是我的[ngClass]条件中的错误，但事实证明，我试图在[ngClass]条件中访问的属性没有初始化。

就像我打字本里有这个一样

element: {type: string};

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

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

而我得到了错误

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

解决办法是把我的财产修复成

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

希望它能帮助那些试图在[ngClass]中匹配属性条件的人

此外，您可以使用方法函数添加：

超文本标记语言

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

在component.ts

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

<div class="collapse in " [ngClass]="(active_tab=='assignservice' || active_tab=='manage')?'show':''" id="collapseExampleOrganization" aria-expanded="true" style=""><ul> 	 <li class="nav-item" [ngClass]="{'active': active_tab=='manage'}"><a routerLink="/main/organization/manage" (click)="activemenu('manage')"> <i class="la la-building-o"></i><p>Manage</p></a></li><li class="nav-item" [ngClass]="{'active': active_tab=='assignservice'}"><a routerLink="/main/organization/assignservice" (click)="activemenu('assignservice')"><i class="la la-user"></i><p>Add organization</p></a></li></ul></div>

代码是一个很好的例子ngClass如果其他条件。

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

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

或者

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

两者将工作相同！

试试像这样…

使用“定义您的类”

<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>

我们可以使用以下语法使类变得动态。在Angular 2 plus中，你可以通过多种方式做到这一点：

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

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

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

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

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

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

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

第一种方法

Active是你的类名

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

第二种方式

Active是你的类名

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

第三条路

通过使用三元运算符类1和类2是你的类名

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

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

1. 如果表达式的计算结果为字符串，则字符串应为一个或多个以空格分隔的类名。
2. 如果表达式的计算结果为一个对象，那么对于具有truthy值的对象的每个键值对，相应的键将用作类名。
3. 如果表达式的计算结果为数组，则数组的每个元素都应该是类型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]="{'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'}"

这个例子有点大，但触发一个类而不是内联输入是我的第一个首选方法。通过这种方式，您可以向元素添加尽可能多的可能性。对于那些想要将多个[ngClass]绑定到单个元素的人来说，可能有一种方法。

<span class="inline-flex items-center font-medium" [ngClass]="addClass">\{\{ badge.text }}</span>

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
type Badge = {size?: 'basic' | 'large';shape?: 'basic' | 'rounded';color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';dot?: boolean;removeButton?: false;text?: string;}
@Component({selector: 'bio-badge',templateUrl: './badge.component.html',styleUrls: ['./badge.component.scss'],changeDetection: ChangeDetectionStrategy.OnPush,})export class BioBadgeComponent {@Input() badge!: Badge;get addClass() {return {'px-2.5 py-0.5 text-sx': this.badge.size === 'basic','px-3 py-0.5 text-sm': this.badge.size === 'large','rounded-full': this.badge.shape === 'basic','rounded': this.badge.shape === 'rounded','bg-gray-100 text-gray-800': this.badge.color === 'gray','bg-red-100 text-red-800': this.badge.color === 'red','bg-yellow-100 text-yellow-800': this.badge.color === 'yellow','bg-green-100 text-green-800': this.badge.color === 'green','bg-blue-100 text-blue-800': this.badge.color === 'blue','bg-indigo-100 text-indigo-800': this.badge.color === 'indigo','bg-purple-100 text-purple-800': this.badge.color === 'purple','bg-pink-100 text-pink-800': this.badge.color === 'pink',}}}