根据条件应用 css答案

【问题标题】：Apply css based on condition根据条件应用 css
【发布时间】：2020-06-17 11:18:33
【问题描述】：

我正在尝试根据条件应用 css 类。这是我的代码，但它似乎没有正确应用该类。

基本上如果selectedEmployee.isHrEmailAddress 为真，那么我想用.section-postal 覆盖section

HTML

<section [ngClass]="{'.section-postal': selectedEmployee.isHrEmailAddress}">
    <div class="page-container">
        <div id="wrapper">
            <form *ngIf="contactDetailsForm" [formGroup]="contactDetailsForm">
                <div class="text-left">
                    <div class="flex flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row">
                        <div class="check-container text-left" style="width: 450px;">
                            <div class="flex flex-row sm:flex-col md:flex-row-reverse lg:flex-col-reverse xl:flex-row">
                                <div class="line">
                                    <p-checkbox name="isHrEmailAddress" formControlName="isHrEmailAddress"
                                        [(ngModel)]="selectedEmployee.isHrEmailAddress" binary="true"
                                        (onChange)="toggle('emailCheckId')">
                                    </p-checkbox>
                                    <span class="ml-2 pt-4" style="font-size: 15px;">I am using my email address on the
                                        member's behalf</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="note" *ngIf="selectedEmployee.isHrEmailAddress">
                        <span>Please note: You will need to confirm the employee's postal address, so that they can be
                            contacted in future.</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

css

  section {
    height: 500px;
  }

 .section-postal {
    height: 650px;
 }

【问题讨论】：

标签： css angular

【解决方案1】：

您可以在ngClass中使用三元运算符根据条件选择类

[ngClass]="selectedEmployee.isHrEmailAddress ? 'section-postal' : 'section'"

【讨论】：

【解决方案2】：

您需要从[ngClass] 值中的类名中删除点。

<section [ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">

CSS selector syntax 中使用点来表示一个类。 HTML 中的类应该没有点。

section {          /* denotes the `<section>` tag: type selector syntax */
  height: 500px;
}

.section-postal {   /* denotes the `section-postal` class: class selector syntax */
  height: 650px;
}

【讨论】：

【解决方案3】：

在 html 中，您必须使用不带点的类名。

[ngClass]="{'section-postal': selectedEmployee.isHrEmailAddress}">

【讨论】：

【解决方案4】：

如果您只想覆盖单个类，也可以使用绑定。这里是documentation，查看class property部分

<section [class.section-postal]="selectedEmployee.isHrEmailAddress"></section>

【讨论】：

【解决方案5】：

我们来了，

   .section-postal { // css file
        color:red;
    }

    i = true; // in ts file

     <section [ngClass]="{'section' : i, 'section-postal' : !i }"> //html file

参考使用 ngClass 添加多个类： Adding multiple class using ng-class

【讨论】：