Question

这是我学习角度的第一天，并且遇到了非常不直观的错误消息，内容为：

未捕获的错误：模板解析错误：意外的结束标记“ p”。它标签已被另一个标签关闭时，可能会发生。对于更多信息请参见 https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags（“ 号码{{i + 1}}：{{phoneNumber}} [错误->]
“）：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等以相同的错误中断。

它接缝只是不喜欢某些类型的标签，大声笑

反正

我在这里做错什么了吗？如果是这样，我应该如何纠正模板？我想念什么？
在开发角度应用程序时，有很多情况下会出现很多不直观的错误消息吗？

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通常会迫使您正确地做事。他们的看法有一个标准，而且有一个标准。因此，即使从技术上讲代码可以运行，在其他地方也会发生潜在的副作用。而且，这些可能是找到的全部PITA。因此，它们迫使您从根本上走上正确的道路。这可能是Angular学习曲线陡峭的很大原因。它质疑您认为已经知道的一切。

一些Angular错误消息可能有点...模糊。但是我认为我一开始就一直在为JS错误而苦苦挣扎。

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

1 个答案: