Angular ngClass：动态应用类答案

【问题标题】：Angular ngClass: apply class dynamicallyAngular ngClass：动态应用类
【发布时间】：2019-05-09 00:43:29
【问题描述】：

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

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

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

【问题讨论】：

请检查你的css，你需要在form-validation（.form-validation.invalid）之前放（.）
请在 stackblitz 上提供minimal reproducible example，因为如果没有有效的复制，我们真的无法判断问题出在哪里。
@MilosKovacevic 这只是一个打字错误，我更正了。
@trichetriche 如果这一切都被阻止在工作场所，我的情况也是如此。
如果 stackblitz 被阻止（我非常怀疑，但让我们相信你），你仍然有 JSFiddle、Codepenn github 和很多其他的。

标签： angular typescript sass dynamic-class

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

【讨论】：

aaahhhh，输入错误，还是不行
您的代码看起来不错 - 在这里查看 - stackblitz.com/edit/angular-ejvaau。请在 stackblitz 中复制同样的问题

【解决方案2】：

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

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

【讨论】：