Question

我想在Angular中混合[ngClass]表达式，首先我想在我的组件中添加一个类数组，然后我还想添加一个基于布尔表达式的类。我可以添加一个带<li [ngClass]="item.status">的数组，我可以添加一个基于布尔表达式的类<li [ngClass]="{active: item.active}">

注意： item.status是一个类似item.status=['done', 'progressed']的数组

但我怎样才能混合两种风格？以下方法不起作用，因为只有属性是重复的。 <li [ngClass]="item.status" [ngClass]="{active: item.active}">

提前致谢

Answer 1

您可以使用以下两者：

<li [class]="item.status" [ngClass]="{active: item.active}">

您不能在单个元素中多次使用ngClass。

Answer 2

由于您在同一元素中无法多次[ngClass]，因此您可以使用[ngClass]和 class 的组合。当以这种方式使用class进行插值时，您也可以添加几个类。尝试使用以下方式。

<强> E.g。 HTML

<li  class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">

<强> E.g。成分

 item = {
    status : ['done', 'progressed'],
    active: true
  }

<强> E.g。 CSS

.done{
  font-weight: bold;
}

.progressed{
  color:blue;
}

.t-size{
  font-size: 2rem;
}

.active{
  background-color: yellowgreen;
}

WORKING DEMO

希望这会对你有所帮助！：）

Answer 3

您可以执行[class.myClass]="booleanExpression"，但我不建议将其与[ngClass]一起添加，因为这样您就可以多次上课。

相反，我建议您为该HTML标记中使用的每个类创建[class.myClass]="booleanExpression"（请记住"booleanExpression"可以设置/取消设置多个类，这样就不会增加.ts文件中的代码行，仅在模板中）。或者我会为[ngClass]制作一个getter方法：

[ngClass]="liClasses"

get liClasses(): string {
    const result = "";
    if (conditionOne) { result += " myClassOne"}
    if (conditionTwo) { result += " myClassTwo"}
    return result;
}

请注意，解决方案1）更具有性能，因为每次更改检测都会触发getter方法，而不仅仅是当conditionOne或conditionTwo发生更改时。

Answer 4

您可以在应用程序组件

中尝试此代码

member = true;
paidAmount = true;
setMyClass() {
    let classes =  {
         member: this.someProperty,    
         paid: this.paidAmount, 
    };
    return classes;
}

'会员'和'付费'是班级名称

，您的模板使用此类似代码

<div class="myclass" [ngClass]="setMyClass()">Call to Action</div>

角度混合不同的[ngClass]表达式

4 个答案: