我的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]绑定到单个元素的人来说,可能有一种方法。
<span class="inline-flex items-center font-medium" [ngClass]="addClass">{{ badge.text }}</span>
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
type Badge = {
size?: 'basic' | 'large';
shape?: 'basic' | 'rounded';
color?: 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink';
dot?: boolean;
removeButton?: false;
text?: string;
}
@Component({
selector: 'bio-badge',
templateUrl: './badge.component.html',
styleUrls: ['./badge.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BioBadgeComponent {
@Input() badge!: Badge;
get addClass() {
return {
'px-2.5 py-0.5 text-sx': this.badge.size === 'basic',
'px-3 py-0.5 text-sm': this.badge.size === 'large',
'rounded-full': this.badge.shape === 'basic',
'rounded': this.badge.shape === 'rounded',
'bg-gray-100 text-gray-800': this.badge.color === 'gray',
'bg-red-100 text-red-800': this.badge.color === 'red',
'bg-yellow-100 text-yellow-800': this.badge.color === 'yellow',
'bg-green-100 text-green-800': this.badge.color === 'green',
'bg-blue-100 text-blue-800': this.badge.color === 'blue',
'bg-indigo-100 text-indigo-800': this.badge.color === 'indigo',
'bg-purple-100 text-purple-800': this.badge.color === 'purple',
'bg-pink-100 text-pink-800': this.badge.color === 'pink',
}
}
}
可以使用以下语法使类成为动态的。在Angular 2 plus中,你可以通过多种方式做到这一点:
[ngClass]="{'active': arrayData.length && arrayData[0]?.booleanProperty}"
[ngClass]="{'active': step}"
[ngClass]="step== 'step1'?'active':''"
[ngClass]="step? 'active' : ''"
[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'">
<某个元素[ngClass] = "(“第一次”,“二”)" >…< /某个元素>
<某个元素[ngClass] = "{“第一”:真的,“二”:真的,“第三”:假}" >…< /某个元素>
<某个元素[ngClass] = " stringExp | arrayExp | objExp " >…< /某个元素>
<some-element [ngClass]="{'class1 class2 class3': true}">
参见https://angular.io/docs/ts/latest/guide/template-syntax.html
<!——用属性>开启/关闭“特殊”类
< div[类。</div> . special]="isSpecial">类绑定是特殊的
<!——绑定到class。Special '胜过类属性——>
< div class = "特殊的“
[class.special] = " !isSpecial">这个没有那么特别</div>
<!——用绑定重置/覆盖所有类名——> .使用实例
<div class="bad curly special"
(类)= " badCurly " >坏花< / div >