angular开发报错：InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ')' is not a valid

最新推荐文章于 2024-06-27 15:41:05 发布

BraveSoul360

最新推荐文章于 2024-06-27 15:41:05 发布

阅读量1.2w

点赞数

分类专栏： angular 文章标签： angular

本文链接：https://blog.csdn.net/yunfeng482/article/details/86682543

版权

angular 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细解析了在使用Angular开发过程中遇到的InvalidCharacterError错误，具体表现为在尝试设置元素属性时出现非法字符的问题。错误源于HTML模板中按钮元素的(click)事件绑定语法不当，多了一个括号导致。通过修正多余的括号，问题得以解决，页面恢复正常显示。

摘要由CSDN通过智能技术生成

问题描述：
在webStorm开发angular应用时候，页面刷新不出来，浏览器控制台报错，看了很多没找到问题。
core.js:14597 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘)’ is not a valid attribute name.
Error: Failed to execute ‘setAttribute’ on ‘Element’: ‘)’ is not a valid attribute name.
具体报错如下：

core.js:14597 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
Error: Failed to execute 'setAttribute' on 'Element': ')' is not a valid attribute name.
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1094)
    at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.setAttribute (animations.js:234)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setAttribute (core.js:22895)
    at createElement (core.js:19549)
    at createViewNodes (core.js:21782)
    at callViewAction (core.js:22137)
    at execComponentViewsAction (core.js:22056)
    at createViewNodes (core.js:21849)
    at createRootView (core.js:21735)
    at callWithDebugContext (core.js:22767)
    at EmulatedEncapsulationDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setAttribute (platform-browser.js:1094)

查错过程：
1、检查程序有误明显异常
2、检查依赖是否正常
3、检查对应页面逻辑
后面仔细看了也发现错误在(click)=“addUser()” ) 多了括号，webstorm没报错，没有提醒，改正之后页面正常展示页面啦，哎，浪费时间坑，对报错异常不清晰，没早点发现问题，浪费不少时间。感觉angular报错也不太直白。。。吐槽一下~

 <div style="margin-top: 5px;float:right;">
          <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="addUser()" )>添加员工</button>
          <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="whiteList()">进入白名单</button>
          <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="syncUser()" >同步人员</button>
          <button mat-raised-button color="primary" style="float:left;margin-right:10px;" (click)="syncOrg()" >同步机构</button>
          <button mat-raised-button (click)="openDialog()">Pick one</button>
        </div>