3

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

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

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

提前致谢

4

4 回答 4

1

您可以使用以下两种方式：

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

您不能ngClass在单个元素中使用超过一次。

于 2018-05-23T04:43:12.213 回答
1

因为您不能[ngClass]在同一元素中有多个时间，所以您可以使用 和 的[ngClass]组合 class。当class以这种方式与插值一起使用时，您也可以添加几个类。尝试使用以下方式。

例如 HTML

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

例如组件

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

例如 CSS

.done{
  font-weight: bold;
}

.progressed{
  color:blue;
}

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

.active{
  background-color: yellowgreen;
}

WORKING DEMO

希望这对你有帮助！:)

于 2018-05-23T05:45:24.063 回答
0

你可以在这里试试这个代码你的应用组件是

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

其中“会员”和“付费”是班级名称

并且您的模板使用此类似的代码

<div class="myclass" [ngClass]="setMyClass()">Call to Action</div>
于 2018-05-23T06:00:52.933 回答
0

你可以这样做[class.myClass]="booleanExpression"，但我不建议将它与一起添加，[ngClass]因为那样你可能会多次上课。

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

[ngClass]="liClasses"

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

请注意，解决方案 1) 的性能更高，因为 getter 方法会在每次更改检测时触发，而不仅仅是在 conditionOne 或 conditionTwo 更改时触发。

于 2018-05-23T04:47:11.947 回答