Angular6 ngClass：使用&&；运算符分析器错误：缺少预期值：在列X处，

我试图在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>

国名

&我得到这个错误：

语法分析器错误：[{has ERROR]中的第5列缺少预期值 ：（！CountryName.valid&&CountryName.toucted）}]in C:/Abdul/TestProjects/Angular6CRUDAPI/Angular6CRUDAPI/src/app/masters/country-master/country-add-2/country-add-2.component。html@23:64 （”

---

我知道我犯了一些愚蠢的错误，我找不到。

好的。明白了：

有错误

应该在引号中

作为

---

好的。明白了：

有错误

应该用引号括起来

作为

如果在类名中使用破折号，则必须在ngClass中使用单引号，或者重命名不带破折号的类名 像

[ngClass]=“{'has-error'：（！CountryName.valid&&CountryName.toucted）}

或

[ngClass]=“{haserror:（！CountryName.valid&&CountryName.toucted）}

如果在类名中使用破折号，则必须在ngClass中使用单引号，或者重命名类名而不使用破折号” 像

[ngClass]=“{'has-error'：（！CountryName.valid&&CountryName.toucted）}

或

[ngClass]=“{haserror:（！CountryName.valid&&CountryName.toucted）}

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