有效模板上非常不直观的 "Unexpected closing tag" 错误

Question

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

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

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

无论如何，

我是不是做错了什么？如果是这样，我应该如何更正模板？我错过了什么？
在开发 angular 应用程序时是否会出现很多不直观的错误消息？

PS：我正在使用 Angular v7.0.5 如果它有任何不同

Answer 1

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

，您的代码也会运行正常

我发现 Angular 经常会迫使你正确地做事。在他们看来，有一个标准，而且它的存在是有原因的。因此，即使从技术上讲代码运行s，也有可能 side-effects 会在其他地方发生。而那些，那些可能是一个完整的 PITA 找到。所以，他们从根本上迫使你走上正确的道路。这可能是 Angular 学习曲线陡峭的很大一部分原因。它质疑你认为你已经知道的一切。

有些 Angular 错误消息可能有点……模糊。但我认为我在一开始就遇到过 JS 错误。

有效模板上非常不直观的 "Unexpected closing tag" 错误

Very unintuitive "Unexpected closing tag" error on a valid template

html

javascript

angular

angular6

angular7