Angular：带有* ngClass的条件类

时间：2016-02-08 12:00:54

标签： javascript css angular angular-template angular-ng-class

我的Angular代码出了什么问题？我得到了：

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

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>

22 个答案:

答案 0 :(得分：606)

Angular 2，..，7提供了几种有条件地添加类的方法：

输入一个 

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

答案 1 :(得分：384)

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

答案 2 :(得分：68)

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

示例：

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

答案 3 :(得分：53)

这是doPost(e)的正常结构：

ngClass

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

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

答案 4 :(得分：33)

通过以下示例，您可以使用＆＃39; IF ELSE＆＃39; 

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

答案 5 :(得分：29)

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

答案 6 :(得分：11)

您应该使用某些内容（[ngClass]代替*ngClass）：

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

答案 7 :(得分：5)

当我创建一个反应形式时，我不得不在按钮上分配两种类型的类。我就这样做了：

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

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

答案 8 :(得分：5)

延长MostafaMashayekhi他对第二选项的回答＆gt; 您还可以使用'，'

链接多个选项 
[ngClass]="{'my-class': step=='step1', 'my-class2':step=='step2' }"

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

结合使用 
class="mats p" *ngIf="mat=='painted'"

答案 9 :(得分：4)

在Angular 7.X

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

  • string-添加字符串（以空格分隔）中列出的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>

答案 10 :(得分：4)

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

或

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

两者都一样！

答案 11 :(得分：3)

这对我有用 [ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"

答案 12 :(得分：3)

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

在HTML中 

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

在component.ts中 

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

    return classes;
  }

答案 13 :(得分：2)

让我们说，YourCondition是您的条件或布尔属性，那么就可以这样做

[class.yourClass]="YourCondition"

答案 14 :(得分：2)

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

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

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

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

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

答案 15 :(得分：1)

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

答案 16 :(得分：1)

尝试这样。.

用''

定义班级 
<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>

答案 17 :(得分：1)

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>

答案 18 :(得分：1)

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

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

答案 19 :(得分：0)

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

相同的错误
  

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

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

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

element: {type: string};

然后在我的[ngClass]中使用

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

我收到错误消息

  

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

解决方案是将我的财产固定为

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

希望它可以帮助尝试匹配[ngClass]中属性条件的人

答案 20 :(得分：0)

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

第一种方式

active 是你的班级名称

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

第二种方式

active 是你的班级名称

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

第三种方式

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

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

答案 21 :(得分：0)

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

  1. 如果表达式的计算结果为字符串，则该字符串应该是一个或多个以空格分隔的类名。
  2. 如果表达式的计算结果为一个对象，那么对于具有真值的对象的每个键值对，相应的键将用作类名。
  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'"
相关问题
最新问题