angular - Angular ngClass：动态应用类

Question

我无法动态设置类。请指导我完成。谢谢。

我在 SCSS 文件中有一个类，如下所示：

.form-validation.invalid {
    border: 2px solid red
}

我的 ts 文件有一个变量名isEmailValid，当这个变量是false边框时，应该不会出现。我的代码如下：

HTML：

<input type="email" class="form-validation" [ngClass]="{'invalid': isEmailValid}"

TS：

//make service call and decide whether email is valid or not
if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = false;
}

在上面的代码之后，该类没有被应用。我哪里错了？请指导。

Answer 1

你忘了把css放进.去。form-validation休息看起来不错。

css

改变

form-validation.invalid {
    border: 2px solid red
}

至

.form-validation.invalid {
    border: 2px solid red
}

ts

//拨打服务电话并确定电子邮件是否有效

if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = false;
}

工作样本在这里 - https://stackblitz.com/edit/angular-ejvaau

Answer 2

在这两种情况下，您都在设置 value true。这是一个错误。

if(value){            //value is the service response
    this.isEmailValid = true;
} else {
    this.isEmailValid = true;
}