ngClass似乎在第一次加载时工作;然后基于用户交互来改变表达，然后不拾取

Question

我现在正在学习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类和开始时一样。整个代码在这里可用

Answer 1

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

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

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