时间戳

首页 > 解决方案 > ngClass 似乎正在第一次加载；此后，表达式会根据用户交互进行更改，然后不拾取

angular - ngClass 似乎正在第一次加载；此后，表达式会根据用户交互进行更改，然后不拾取

问题描述

我现在正在学习 Angular。我了解了[ngClass]指令。我想用它来添加和删除多个 css 类。第一次加载它工作正常。但是当我更改表达式变量时，它不会改变颜色。我有以下 HTML：

<span [ngClass]="errorClasses">{{errorMsg}}</span>

在 ts 中：

public hasError = false;
public errorClasses = {
    "error" : this.hasError,
    "success" : !this.hasError,
    "italic" : true
};

所以它呈现：

<span class="success italic" ng-reflect-ng-class="[object Object]">Please enter Username and Password</span>

然后基于我所做的一些用户交互hasError=true，现在我希望它呈现：

<span class="error italic" ng-reflect-ng-class="[object Object]">Please enter Username and Password</span>

这没有发生；CSS 类与开始时相同。 完整代码可在此处获得

标签： angular

解决方案

您的问题与值无关，ngClass但与值更新无关，您需要errorClasses用新值更新this.hasError值。

您的showError函数应如下所示：

showError(username:String, password:String) : void {
        if(username.length === 0 && password.length === 0) {
            this.errorMsg = "Please enter Username and Password";
        }
        else if(username.length) {
            this.errorMsg = "Please enter Password";
        }
        else if(password.length) {
            this.errorMsg = "Please enter Username";
        }
        this.hasError = true;
        this.errorClasses = {
        "error" : this.hasError,
        "success" : !this.hasError,
        "italic" : true
    };

显然代码没有优化，也不是一个好方法，它只是为了指出你的问题，我们不应该像这样改变对象

推荐阅读