具有多个/不同语句的 ngClass答案

【问题标题】：ngClass with multiple/different statements具有多个/不同语句的 ngClass
【发布时间】：2019-09-17 13:52:41
【问题描述】：

我查看了类似的问题，但无法完全理解我正在寻找的解决方案。

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

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

我尝试使用"||"，正如我在其他类似问题中看到的那样，但找不到有效的解决方案，我很可能没有正确编写语法。

【问题讨论】：

我尝试使用"||"，正如我在其他类似问题中看到的那样，但找不到可行的解决方案，我很可能没有正确编写语法。 你能扩展这个？看看您到底尝试了什么并了解它对您不起作用的方式会很有帮助。
尝试使用 [class.text--line-through]="heading === 'whatever' || heading === 'otherstuff'" 这样的 class.className 版本来添加独立于 ngClass 条件的额外 className。

标签： angular angular-material frontend

【解决方案1】：

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

【讨论】：

我应该在html模板中添加class text--line-through吗？
是的。做这样的事情： [ngClass]="{'col-md-4': useColFour, 'col-md-3': !useColFour }"
但如果你有很长的分类列表。你可以在你的ts中制作对象。并将其绑定到您的 html 中。 TS: public class= { 'col-md-4': this.useColFour, 'col-md-3': !this.useColFour };在 HTML 中：[ngClass]="class"

【解决方案2】：

还有另一种声明类的方法。像这样：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案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 '';
  }
}

【讨论】：