Question

我看过类似的问题，但不愿为所要的解决方案缠住头。

所以基本上我有这段代码：

 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，就像在其他类似问题中看到的一样，但是找不到有效的解决方案，我很可能没有正确编写语法。

Answer 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>

Answer 2

最佳实践表明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>

Answer 3

假设此html模板已链接到实际组件，我建议在该组件中创建一个返回该类的方法，并只在您的“ ngClass”指令中使用它。

Answer 4

如果您真的想将其保留在标记中：

[ngClass]="{'col-md-4': heading === 'Abrechenbare Buchungen', 'col-md-3': heading !== 'Abrechenbare Buchungen', 'text--line-through': attendee?.orderStatus == 'CANCELLED'}"

Answer 5

使用类似这样的函数会更好，而不是弄乱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 '';
  }
}

具有多个/不同语句的ngClass

5 个答案: