Angular：条件 class 与 *ngClass

Question

我的 Angular 代码有什么问题？我收到以下错误：

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass

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

Answer 1

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

* 仅适用于结构指令的 shorthand 语法，您可以在其中使用

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

Answer 2

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

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

Answer 3

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

示例：

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

Answer 4

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

Answer 5

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>

Answer 6

您可以使用 ngClass 有条件地应用 class 名称，而不是 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};
    }

Answer 7

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

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

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

Answer 8

这对我有用：

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

Answer 9

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

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

此外，*ngIf 也可用于某些情况，通常与 *ngFor

结合使用

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

Answer 10

通过以下示例您可以使用 'IF ELSE'

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

Answer 11

在Angular 7.X

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

string - 添加 CSS类中列出的字符串（space 分隔）
数组 - 添加声明为数组元素的 CSS 类
对象 - 键是 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>

Answer 12

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

[class.yourClass]="YourCondition"

Answer 13

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>

Answer 14

与 [ngClass] 指令无关，但我也遇到了与

相同的错误

Cannot read property 'remove' of undefined at...

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

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

element: {type: string};

并且在我的 [ngClass] 中我使用的是

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

我遇到了错误

Cannot read property 'type' of undefined at...

解决方案是将我的属性修改为

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

希望它能帮助那些试图在 [ngClass]

中匹配属性条件的人

Answer 15

此外，您还可以添加with方法函数：

在HTML

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

在component.ts

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

    return classes;
  }

Answer 16

<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 if else 条件的很好示例。

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

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

Answer 17

您可以使用 [ngClass] 或 [class.classname]，两者效果相同。
[class.my-class]="step==='step1'"

或者

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

两者效果相同！

Answer 18

像这样尝试..

用''

定义你的class

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

Answer 19

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

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

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

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

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

Answer 20

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

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

Answer 21

Angular提供了多种方式来有条件地添加classes：

第一种方式

active 是你的 class 名字

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

第二种方式

active 是你的 class 名字

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

第三种方式

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

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

Answer 22

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

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

    [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'"

Angular：条件 class 与 *ngClass

Angular: conditional class with *ngClass

javascript

css

angular-template

angular-ng-class

angular