Angular： *ngclass的有条件类
我的角度代码怎么了？我收到以下错误：
无法在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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（25）
Angular版本2+提供了几种有条件添加类别的方法：
一型
type 2
和多个选项：
type三
type四
您可以在
Angular version 2+ provides several ways to add classes conditionally:
Type one
Type two
and multiple options:
Type three
Type four
You can find these examples on the the documentation page.
[ngclass] = ...而不是*ngclass。*仅适用于结构指令的速记语法，例如，您可以在其中而不是较长的等价版本，
另请参见 ngclass 。
另请参见 syntax syntax
[ngClass]=...instead of*ngClass.*is only for the shorthand syntax for structural directives where you can for example useinstead of the longer equivalent version
See also NgClass.
See also Template syntax
另一个解决方案是使用
[class.active]。例子：
Another solution would be using
[class.active].Example:
那是正常的结构。对于
ngclass，它是：因此，在您的情况下，只需这样使用...
That's the normal structure. For
ngClass, it is:So in your case, just use it like this...
在以下示例中，您可以使用“如果其他”：
With the following examples, you can use 'IF ELSE':
您可以使用ngclass进行有条件地应用班级名称，而不是在角度上应用
条件
多种条件
方法表达式
此方法将内部您的组件
You can use ngClass to apply the class name both conditionally and not in Angular
For Example
Conditional
Multiple Condition
Method expression
This method will inside of your component
Angular提供了有条件添加类别的多种方法：
第一种方式
活动是您的类名称
第二种方法
active是您的类名称
第三路
通过使用三元运算符class1和class2是您的班级名称
Angular provides multiple ways to add classes conditionally:
First way
active is your class name
Second way
active is your class name
Third way
by using ternary operator class1 and class2 is your class name
您应该使用某些东西（
[ngclass]而不是*ngclass）这样：You should use something (
[ngClass]instead of*ngClass) like that:在Angular 7.x中，
CSS类的更新如下，具体取决于表达式评估的类型：
String-添加了字符串中列出的CSS类（Space Delimited）
array-添加了为数组元素的CSS类
对象 - 键是CSS类，当值评估为真实值时，在值中给出的表达式时会添加。否则，将其删除。
In Angular 7.X
The CSS classes are updated as follows, depending on the type of the expression evaluation:
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.
返回的值：
，您可以分配一个函数
此外
Additionally, you can assign a value returned by a function:
In HTML
In component.ts
要扩展 mostafamashayekhi的答案您也可以选择二＆gt; '，'的选项*ngif
也可以在某些情况下与 *ngfor结合的某些情况中使用
To extend MostafaMashayekhi's answer for option two>, you can also chain multiple options with a ','
Also *ngIf can be used in some of these situations usually combined with a *ngFor
您可以使用[ngclass]或[class.classname]，两个都可以工作。
[class.my-class] =“ step ==='step1'”＆nbsp;＆nbsp;或
[ngclass] =“ {'my-class'：step =='step1'}”两个都可以工作！
You can use [ngClass] or [class.classname], both will work the same.
[class.my-class]="step==='step1'"OR
[ngClass]="{'my-class': step=='step1'}"Both will work the same!
令您的条件为您的状况或布尔属性。然后这样做：
Let YourCondition be your condition or a Boolean property. Then do it like this:
当我创建一个反应性形式时，我必须在按钮上分配两种类型的类。这就是我这样做的方式：
当表单有效时，按钮具有BTN和BTN级（来自Bootstrap），否则只有BTN类。
While I was creating a reactive form, I had to assign 2 types of class on the button. This is how I did it:
When the form is valid, button has btn and btn-class (from bootstrap), otherwise just btn class.
我们可以使用以下语法进行类动态。在Angular 2 Plus中，您可以以各种方式执行此操作：
We can make a class dynamic by using the following syntax. In Angular 2 plus, you can do this in various ways:
该指令以三种不同的方式运行，具体取决于表达式评估的三种类型中的哪个：
对于多个选项：
The directive operates in three different ways, depending on which of three types the expression evaluates to:
For multiple options:
这对我有用：
This is what worked for me:
ngclass语法：您可以这样使用：
ngClasssyntax:You can use it like this:
对于
elseif语句（较少比较），请这样使用（例如，您比较三个语句）：For an
elseifstatement (less comparison), use it like this (for example, you compare three statements):它与
[ngclass]指令无关，但我也遇到了与，我认为这是我
[ngclass]条件中的错误，但事实证明我试图在<的条件下尝试访问的属性代码> [ngclass] 未初始化。就像我在打字稿文件中
以及
[ngclass]中都有这个，我正在使用，并且正在遇到错误
解决方案是将我的属性修复给
我，希望它可以帮助试图在
[ngclass]中匹配属性条件的人。It is not relevant with the
[ngClass]directive, but I was also getting the same error asand I thought it to be the error in my
[ngClass]condition, but it turned out the property I was trying to access in the condition of[ngClass]was not initialized.Like I had this in my TypeScript file
and in my
[ngClass], I was usingAnd I was getting the error
and the solution was to fix my property to
I hope it helps somebody who is trying to match a condition of a property in
[ngClass].该示例有点大，但是触发类而不是键入内联的是我的第一个首选方法。
这样，您可以将尽可能多的可能性添加到元素中。
对于那些想要将多个[ngclass]绑定到一个元素的人可能有一种方法。
The example is a bit big, but triggering a class instead of typing inline is my first preferred approach.
This way, you can add as many possibilities as you want to your element.
There may be a way for those who want to bind more than one [ngClass] to a single element.
使用：
该代码是ngclass 的一个很好的例子，如果 - else 条件。
Use:
The code is a good example of an ngClass if-else condition.
尝试这样...
用''定义您的班级：
Try it like this...
Define your class with '':
如果用户想根据
＆amp;＆amp;and||的类别显示课程，那么以下一个对我有用：示例：示例：
If a user wants to display the class on basis of
&&and||, then the below one is working for me:Example:
的一些有用的助手管
NGCLASS示例
Some usefull helper pipes for ngClass
Example