时间戳

首页 > 解决方案 > 根据条件应用 css

css - 根据条件应用 css

问题描述

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

基本上如果selectedEmployee.isHrEmailAddress是真的那么我想section用.section-postal

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

标签： cssangular

解决方案

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

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

点在CSS 选择器语法中用于表示一个类。HTML 中的类应该没有点。

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

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

推荐阅读