我看过类似的问题,但不愿为所要的解决方案缠住头。
所以基本上我有这段代码:
loadChildren: './home/home.module#HomeModule'
我想修改并添加一条额外的声明。逻辑将是如果( <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>
或heading === 'Abrechenbare Buchungen'
和heading === 'Kürzlich abgerechnete Buchungen'
,则应将类attendee?.orderStatus == 'CANCELLED'
添加到'text--line-through'
和col-md-3
我尝试了col-md-4
,就像在其他类似问题中看到的一样,但是找不到有效的解决方案,我很可能没有正确编写语法。
答案 0 :(得分:1)
还有另一种声明类的方法。像这样:
<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>
答案 1 :(得分:1)
最佳实践表明evit在HTML中添加了逻辑。将其移至Ts。
在您的商品中添加吸气剂:
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>
答案 2 :(得分:0)
假设此html模板已链接到实际组件,我建议在该组件中创建一个返回该类的方法,并只在您的“ ngClass”指令中使用它。
答案 3 :(得分:0)
如果您真的想将其保留在标记中:
[ngClass]="{'col-md-4': heading === 'Abrechenbare Buchungen', 'col-md-3': heading !== 'Abrechenbare Buchungen', 'text--line-through': attendee?.orderStatus == 'CANCELLED'}"
答案 4 :(得分:0)
使用类似这样的函数会更好,而不是弄乱HTML
<input type="text" [class]="getAgeTextColor(form.get('ActiveAge').value)" class="form-control-plaintext" [ngClass]="{'form-control-plaintext': true}" formControlName="ActiveAge">
getAgeTextColor(ActiveAge){
if(ActiveAge != null){
const months = ActiveAge.split(' ')[0];
if(months >= 24){
return 'text-green';
}else if(months > 12 && months < 24){
return 'text-yellow';
}else if(months <= 12){
return 'text-red';
}
}else{
return '';
}
}