Javascript Angular：带 *ngClass 的条件类

Angular: conditional class with *ngClass

提问by daniel

What is wrong with my Angular code? I am getting:

我的 Angular 代码有什么问题？我正进入（状态：

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

HTML

HTML

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

回答by MostafaMashayekhi

Angular version 2,...,9 provides several ways to add classes conditionally:

Angular 版本 2,...,9 提供了几种有条件地添加类的方法：

type one

类型一

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

type two

类型二

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

and multiple option:

和多个选项：

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

type three

类型三

[ngClass]="{1:'my-class1',2:'my-class2',3:'my-class4'}[step]"

type four

类型四

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

回答by Günter Z?chbauer

[ngClass]=...instead of *ngClass.

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

*is only for the shorthand syntax for structural directives where you can for example use

*仅用于结构指令的速记语法，例如您可以使用

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

instead of the longer equivalent version

而不是更长的等效版本

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

See also https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

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

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

See also https://angular.io/docs/ts/latest/guide/template-syntax.html

另请参阅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>

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

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

回答by Joel Almeida

Another solution would be using [class.active].

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

Example :

例子 ：

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

回答by Alireza

That's the normal structure for ngClassis:

这是正常的结构ngClass是：

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

So in your case, just use it like this...

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

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

回答by Chaitanya Nekkalapudi

with the following examples you can use 'IF ELSE'

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

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

回答by Code-EZ

You can use ngClass to apply the class name both conditionally and not in Angular

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

For Example

例如

[ngClass]="'someClass'">

Conditional

有条件的

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

Multiple Condition

多重条件

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

Method expression

方法表达式

[ngClass]="getSomeClass()"

This method will inside of your component

此方法将在您的组件内部

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

回答by Thierry Templier

You should use something ([ngClass]instead of *ngClass) like that:

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

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

回答by Rohit.007

In Angular 7.X

在 Angular 7.X

The CSS classes are updated as follows, depending on the type of the expression evaluation:

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

• string - the CSS classes listed in the string (space delimited) are added

• Array - the CSS classes declared as Array elements are added

• Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are removed.

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

• Array - 添加声明为 Array 元素的 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>

回答by Robert Leeuwerink

to extend MostafaMashayekhi his answer for option two> you can also chain multiple options with a ','

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

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

Also *ngIf can be used in some of these situations usually combined with a *ngFor

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

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

回答by Sarvar Nishonboev

While I was creating a reactive form, I had to assign 2 types of class on the button. This is how I did it:

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

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

When the form is valid, button has btn and btn-class (from bootstrap), otherwise just btn class.

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