有效模板上非常不直观的“意外结束标签”错误

Posted

技术标签:

【中文标题】有效模板上非常不直观的“意外结束标签”错误【英文标题】:Very unintuitive "Unexpected closing tag" error on a valid template 【发布时间】:2019-04-13 18:31:44 【问题描述】:

这是我学习 Angular 的第一天,我遇到了一条非常不直观的错误消息,上面写着:

未捕获的错误:模板解析错误:意外的结束标记“p”。它 当标签已经被另一个标签关闭时可能会发生。为了 更多信息见 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags(" 号码 i + 1 : phoneNumber [ERROR ->]

"): ng:///AppModule/AddressCardComponent.html@5:0

错误是在如下所示的有效 html 模板上引发的:

<p>Phones:</p>
<p *ngFor="let phoneNumber of user.phone; index as i">
  <h3>
      Number  i + 1 :  phoneNumber 
  </h3>
</p>

在组件本身中它看起来像这样:

@Component(
  selector: 'app-address-card',
  templateUrl: './address-card.component.html',
  styleUrls: ['./address-card.component.scss']
)
export class AddressCardComponent implements OnInit 

  user: any;

  constructor() 
    this.user = 
      name: 'Foo Bar',
      title: 'Software Developer',
      address: '1234 Main St., State, City 610010',
      phone: [
        '123-123-1234',
        '456-546-4574'
      ]
    
  

  ngOnInit() 
  


很酷的是,如果我将内部的h3 标记更改为spana,它会按预期完美运行,而当内部标记为ph3h2 时,h1div 等它只是因同样的错误而中断。

它只是不喜欢某些类型的标签,lol


不管怎样,

    我在这里做错了吗?如果是这样,我应该如何更正模板?我错过了什么?

    在开发 Angular 应用程序时是否会出现很多不直观的错误消息?


PS:如果有什么不同,我正在使用 Angular v7.0.5

【问题讨论】:

阅读this。 p 标签内不能有 h1 标签 Should a heading be inside or outside a <p>?的可能重复 @user184994 好吧,浏览器会渲染这样的东西,即使它不遵循标准。那么另一个问题:角度真的需要告诉我要使用什么标签吗?而且,还有这么模糊的错误信息……感觉有点奇怪 我认为它并没有那么模糊。它会准确地告诉您是哪个标签导致了错误,以及一个指向 w3 规范的链接,该链接会告诉您原因。浏览器会在到达您的h1 后立即自动插入结束p 标签,因此您现在拥有没有匹配开始标签的原始结束标签 好的,我明白了。谢谢大家,这个话题对我来说是新的。我想我应该花一些时间来适应 Angular 【参考方案1】:

为了验证 HTML 5,标题标签不能在段落标签内。我怀疑如果您将&lt;p *ngFor="let phoneNumber of user.phone; index as i"&gt; 替换为&lt;div *ngFor="let phoneNumber of user.phone; index as i"&gt;,您的代码也会运行良好

我发现 Angular 通常会真正迫使您正确地做事。他们看待它的方式,有一个标准,它的存在是有原因的。因此,即使从技术上讲代码运行,也有可能在其他地方发生的副作用。而那些,那些可能是一个总要找到的 PITA。因此,它们从根本上迫使您走上正确的道路。这可能是 Angular 学习曲线陡峭的很大一部分原因。它质疑你认为你已经知道的一切。

一些 Angular 错误消息可能有点……含糊不清。但我想我一开始也同样为 JS 错误而苦苦挣扎。

【讨论】:

嗯,是的,你是对的。但是 angular 告诉我要使用哪些标签以及在哪里使用它们仍然感觉有点奇怪。至少,他们应该提出适当的错误信息...... 我已经更新了我的答案,以更好地解决您的所有问题。 :) 你也可以替换成 ..

以上是关于有效模板上非常不直观的“意外结束标签”错误的主要内容,如果未能解决你的问题,请参考以下文章

无服务器版本 > 2.35 Cloudformation 模板的变量替换错误

Django Allauth 自定义登录不显示错误

带有 python 的 Jira API 在有效凭据上返回错误 401

当错误说它不应该时,为啥这在 api 21 上有效

在SQL导入导出向导上接收错误

dede模板留言提交错误时返回空白页处理方法