ngClass:使用&&操作符分析器错误:缺少预期:在第X列，

Question

我试图在&&的条件下使用ngClass：

我的代码是：

<div class="col-sm-12 col-md-6 form-group " [ngClass]="{has-error : (!CountryName.valid && CountryName.touched)}">
                        <label class="control-label">Country Name</label>
                        <input type="text" class="form-control" name="CountryName" placeholder="Country name" maxlength="50" minlength="5" required 
                               ngModel #CountryName="ngModel" />

                    </div>

&我知道这个错误：

错误:解析器错误:缺少预期:在C:/Abdul/TestProjects/Angular6CRUDAPI/Angular6CRUDAPI/src/app/masters/country-master/country-add-2/country-add-2.component.html@23:64 (“)中{has：(!CountryName.valid & CountryName.touched)}中的列5处

我知道我在做一些我找不到的愚蠢的错误。

Answer 1

好的。明白了：has-error应该在引号中

作为

 [ngClass]="{'has-error' : (!CountryName.valid && CountryName.touched)}"

Answer 2

如果在类名中使用破折号，则必须在ngClass中使用单引号或在没有破折号符号的情况下重命名类名

[ngClass]="{'has-error' : (!CountryName.valid && CountryName.touched)}

或

[ngClass]="{haserror : (!CountryName.valid && CountryName.touched)}