非常不直观的“意外结束标签"有效模板上的错误 [英] Very unintuitive "Unexpected closing tag" error on a valid template

问题描述

这是我学习 angular 的第一天，我遇到了一条非常不直观的错误消息，内容如下:

It's my first day of learning angular and I've encountered a very unintuitive error message, which says:

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

Uncaught Error: Template parse errors: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (" Number {{ i + 1 }}: {{ phoneNumber }} [ERROR ->]

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

The error is thrown on a valid html template that looks like this:

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

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

and in the component itself it just looks like this:

@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 标签更改为 span 或 a，它会按预期完美运行，而当内部标签是p、h3、h2、h1、div等只是因为同样的错误而中断.

The cool thing is that if I change the inner h3 tag to a span or a, it works perfectly as expected, whereas when the inner tag is p, h3, h2, h1, div etc it just breaks with the same error.

看来它只是不喜欢某些类型的标签，哈哈

It seams it just doesn't like certain kinds of tags, lol

无论如何，

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

1. Am I doing something wrong here? If so, how should I correct the template? What do I miss?

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

Are there many situations when that much unintuitive error messages come up while developing angular apps?

<小时>

PS:如果有任何区别，我使用的是 Angular v7.0.5

---

PS: I'm using Angular v7.0.5 if it makes any difference

推荐答案

对于要验证的 HTML 5，标题标签不能位于段落标签内.我怀疑如果您将 <p *ngFor="let phoneNumber of user.phone; index as i"> 替换为 <div *ngFor="letphoneNumber of user.phone; index as i">

For HTML 5 to validate, heading tags cannot be inside paragraph tags. I suspect your code will also run fine if you replace <p *ngFor="let phoneNumber of user.phone; index as i"> with <div *ngFor="let phoneNumber of user.phone; index as i">

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

I am finding that Angular will often really force you to do things correctly. The way they see it, there is a standard, and it's there for a reason. So even if technically the code runs, there are potential side-effects that will happen elsewhere. And those, those might be a total PITA to find. So, they force you on the right path at the very core. This is probably a big part of the reason that Angular has a steep learning curve. It questions everything you think you already know.

一些 Angular 错误消息可能有点……含糊.但我想我一开始也遇到过 JS 错误.

Some Angular error messages can be a bit... vague. But I think I've struggled with JS errors just as much at the start.

这篇关于非常不直观的“意外结束标签"有效模板上的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！