具有多个/不同语句的ngClass
具有多个/不同语句的ngClass
提问于 2019-09-17 21:52:42
我看过类似的问题，但不能理解我正在寻找的解决方案。
所以基本上我有这段代码：
<div class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
[ngClass]="
heading === 'Abrechenbare Buchungen' ? 'col-md-4' : ' col-md-3'
"
>
{{ attendee?.lastName }}, {{ attendee?.firstName }}
</div>我想修改和添加一个额外的声明。逻辑将是if (heading === 'Abrechenbare Buchungen'或if heading === 'Kürzlich abgerechnete Buchungen')和attendee?.orderStatus == 'CANCELLED'，那么它应该将'text--line-through'类添加到col-md-3和col-md-4中。
我尝试了"||"，就像我在其他类似问题中看到的那样，但找不到一个有效的解决方案，很可能是我写的语法不正确。
回答 5
Stack Overflow用户
回答已采纳
发布于 2019-09-17 22:05:51
angular最佳实践表明，evit在HTML中添加了逻辑。把它移到Ts。
在ts中添加一个getter：
get useColFour() {
return (
(this.heading === 'Abrechenbare Buchungen' ||
this.heading === 'Kürzlich abgerechnete Buchungen') &&
this.attendee['orderStatus'] == 'CANCELLED'
);
}更改您的html：
<div class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
[ngClass]="useColFour ? 'col-md-4' : ' col-md-3'
"
>
{{ attendee?.lastName }}, {{ attendee?.firstName }}
</div>Stack Overflow用户
发布于 2019-09-17 21:57:53
声明类还有另一种方法。就像这样：
<div
class="attendees-list__item-order-status course-details-attendees text text-cooler-grey align-self-center pl-3"
[ngClass]="heading === 'Abrechenbare Buchungen' ? 'col-md-4' : ' col-md-3'"
[class.text--line-through]="(heading === 'Abrechenbare Buchungen' || heading === 'Kürzlich abgerechnete Buchungen') && attendee?.orderStatus == 'CANCELLED'">
{{ attendee?.lastName }}, {{ attendee?.firstName }}
</div>Stack Overflow用户
发布于 2019-09-17 21:56:15
假设这个html模板链接到一个实际的组件，我建议在返回类的组件中创建一个方法，并在"ngClass“指令中使用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57975785
复制相关文章
相似问题
腾讯云开发者
