时间戳

首页 > 解决方案 > 无法在“元素”上执行“setAttribute”：Angular 11

html - 无法在“元素”上执行“setAttribute”：Angular 11

问题描述

我的新 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 中才会发生。

标签： htmlangularng-classangular10angular11

解决方案

如果您使用条件来确定类，则应使用不同的语法，如下所示：

[ngClass]="{'first': true, 'second': true, 'third': false}"

例子：

[ngClass]="{'checked': rating > 0}"

https://angular.io/api/common/NgClass

推荐阅读