问题描述
我的新 Angular 11 应用程序出现以下错误。找不到任何语法错误。
core.js:6156 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'ng-reflect-Dev Portal' is not a valid attribute name.
at EmulatedEncapsulationDomrenderer2.setAttribute (http://localhost:8080/admin/vendor.js:62217:16)
at setNgReflectProperty (http://localhost:8080/admin/vendor.js:38053:26)
at setNgReflectProperties (http://localhost:8080/admin/vendor.js:38078:13)
at elementPropertyInternal (http://localhost:8080/admin/vendor.js:38001:13)
at Module.ɵɵproperty (http://localhost:8080/admin/vendor.js:42749:9)
at DevMainHeaderComponent_Template (http://localhost:8080/admin/app-layout-layout-module.js:394:65)
at executeTemplate (http://localhost:8080/admin/vendor.js:37594:9)
at refreshView (http://localhost:8080/admin/vendor.js:37463:13)
我的html模板如下,
<div class="row main-header-container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-8 col-xl-8 offset-lg-2 offset-xl-2">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-2 col-xl-2" [ngClass]="(isLoggedInUser === true)?'offset-lg-3 offset-xl-3':'offset-lg-9 offset-xl-9'">
<select class="form-control">
<option>English</option>
<option>Finish</option>
</select>
</div>
</div>
</div>
</div>
TS文件如下,
export class DevMainHeaderComponent implements OnInit {
public isLoggedInUser = true;
}
如果我删除了 ngClass 指令,它可以工作,但我在这里找不到 ngClass 语法的任何问题,即使我尝试过像这样的硬编码 [ngClass]="['first']"
,仍然得到同样的错误。
这个控制台错误不是在 ng serve 中抛出并且工作正常,只有在 prod 中才会发生。
解决方法
如果您使用条件来确定类,则应使用不同的语法,如下所示:
[ngClass]="{'first': true,'second': true,'third': false}"
示例:
[ngClass]="{'checked': rating > 0}"
https://angular.io/api/common/NgClass
,我正在使用 maven 构建我的项目,我的项目名称是 <name>Dev Portal</name>
。它包含一个空间。此项目名称正在添加为属性。并且属性不能包含空格。
<!--bindings={
"ng-reflect-Dev Portal": "true"
}-->
从名称中删除空格解决了问题<name>DevPortal</name>
在 Angular 9 中,这种行为不存在。