Angular 5设置非Angular属性data-menu-title报错，请求排查解决

嗨，我来帮你搞定这个报错！你遇到的问题根源在于Angular对模板属性的解析规则——它把你的data-menu-title当成了组件/指令的输入属性来处理，但<section>作为原生HTML元素，根本没有对应的menu-title（或者驼峰式的menuTitle）输入属性，所以才会抛出那个错误。

为什么会触发这个错误？ #

在Angular模板里，当你写data-menu-title="{{view.title}}"时，虽然用了插值语法，但Angular的解析器会自动把带连字符的属性名转换为驼峰式，然后去查找该元素对应的组件/指令是否有这个输入属性。显然，原生<section>没有这个属性，所以就报错了。

两种解决方案 #

• 方案一：用attr.前缀明确绑定原生属性（推荐）
  这是Angular官方推荐的绑定原生HTML属性的方式，通过attr.前缀告诉Angular：这是一个原生HTML属性，不是组件输入。代码修改如下：

  <section *ngFor="let view of views; let last = last" [ngSwitch]="view.type" [attr.data-menu-title]="view.title">
  

  这里直接用方括号绑定view.title，比插值语法更简洁高效。

• 方案二：保留插值语法的兼容写法
  如果你更习惯用插值，也可以这样写（不过不如方案一稳妥）：

  <section *ngFor="let view of views; let last = last" [ngSwitch]="view.type" attr.data-menu-title="{{view.title}}">
  

  同样通过attr.前缀明确属性类型，避免Angular误判。

内容的提问来源于stack exchange，提问作者Marc Rasmussen