我的Angular代码出了什么问题?我得到以下错误:
无法读取BrowserDomAdapter.removeClass中未定义的属性“remove”
<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>
当前回答
你可以使用[ngClass]或[class]。Classname]，两者的工作方式相同。 [class.my-class] = " = = =步step1” 或
[ngClass] = "{“我班”:一步= =“步骤1”}”
两者的效果是一样的!
其他回答
在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>
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>
此外，您可以添加与方法函数:
在HTML中
<div [ngClass]="setClasses()">...</div>
在component.ts
// Set Dynamic Classes
setClasses() {
let classes = {
constantClass: true,
'conditional-class': this.item.id === 1
}
return classes;
}
像这样试试。
用“
<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>
该指令有三种不同的操作方式，这取决于表达式的计算结果是三种类型中的哪一种:
If the expression evaluates to a string, the string should be one or more space-delimited class names. If the expression evaluates to an object, then for each key-value pair of the object with a truthy value the corresponding key is used as a class name. If the expression evaluates to an array, each element of the array should either be a string as in type 1 or an object as in type 2. This means that you can mix strings and objects together in an array to give you more control over what CSS classes appear. See the code below for an example of this.
[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'"
