961

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

无法在 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>
4

22 回答 22

2177

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'"
于 2017-02-01T07:50:31.080 回答
471

[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>
于 2016-02-08T12:02:27.193 回答
92

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

例子 ：

<ol class="breadcrumb">
    <li [class.active]="step=='step1'" (click)="step='step1'">Step1</li>
</ol>
于 2016-02-08T12:22:58.787 回答
86

这是正常的结构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>
于 2017-07-20T05:21:43.737 回答
71

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

<p class="{{condition ? 'checkedClass' : 'uncheckedClass'}}">
<p [ngClass]="condition ? 'checkedClass' : 'uncheckedClass'">
<p [ngClass]="[condition ? 'checkedClass' : 'uncheckedClass']">
于 2018-06-08T13:07:09.933 回答
50

您可以使用 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};
    }
于 2017-08-04T18:44:15.950 回答
20

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

第一种方式

active 是你的班级名称

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

第二种方式

active 是你的班级名称

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

第三种方式

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

[ngClass]="(step=='step1')?'class1':'class2'"
于 2021-03-23T18:15:43.040 回答
18

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

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

于 2016-02-08T12:05:39.460 回答
16

在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>
于 2018-12-05T14:24:05.483 回答
11

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

在 HTML 中

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

在组件.ts

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

    return classes;
  }
于 2019-09-28T19:29:12.670 回答
9

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

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

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

class="mats p" *ngIf="mat=='painted'"
于 2018-05-07T18:25:53.520 回答
8

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

   或者

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

两者的工作方式相同！

于 2020-01-31T11:19:12.640 回答
6

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

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

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

于 2017-09-06T23:49:11.607 回答
5

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

[class.yourClass]="YourCondition"
于 2019-03-20T06:15:49.320 回答
5

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

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

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

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

[ngClass]="step? 'active' : ''"
于 2020-08-18T18:44:24.910 回答
4

这对我有用：

[ngClass]="{'active': dashboardComponent.selected_menu == 'profile'}"
于 2018-03-23T04:36:26.917 回答
4

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>
于 2019-06-19T05:53:59.737 回答
3

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

  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'"
于 2021-05-01T12:09:13.910 回答
2

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

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

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

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

element: {type: string};

在我[ngClass]使用的

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

我得到了错误

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

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

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

希望它可以帮助那些试图匹配房产条件的人[ngClass]

于 2019-09-18T09:18:04.803 回答
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 if else 条件的好例子。

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

[ngClass]="{'active': active_tab=='assignservice'}"
于 2020-01-10T07:04:39.737 回答
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>
于 2020-02-08T14:02:29.297 回答
1

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

<div [ngClass]="step === 'step1' ? 'class1' : (step === 'step2' ? 'class2' : 'class3')"> {{step}} </div>
于 2021-01-07T13:42:00.293 回答