模板解析错误：意外的结束标记“p”答案

【问题标题】：Template parse errors: Unexpected closing tag "p"模板解析错误：意外的结束标记“p”
【发布时间】：2019-09-14 07:09:05
【问题描述】：

我想在 Angular 中格式化 XML 文件。我试过这个：

<div class="element-box">
  <div class="details-wrapper">
    <p><b class="label">Raw Request</b>
      <pre>
        {{apiattempt.raw_request | xmlBeautyfier }}
      </pre>
    </p>
  </div>
</div>

但我收到此错误：

ERROR in : 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 ("
        {{apiattempt.raw_request | xmlBeautyfier }}
      </pre>
    [ERROR ->]</p>
    <p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
  </div"):

你知道我该如何解决这个问题吗？

【问题讨论】：

p标签可以通过使用其他标签来隐式关闭；见this问题
w3.org/TR/html5/…
好问题 - 我不知道。

标签： html angular typescript

【解决方案1】：

来自html.com：

 结束标记是可选的，它隐含在 HTML 文档中在开始  标记之后遇到的下一个 HTML 元素的开始标记中。

【讨论】：

去掉结束的标签？这会产生任何异常吗？

【解决方案2】：

<pre> 标签是块级元素。当它被放置在... 中时，它的行为就像 一样，导致它在到达您的 时关闭并引发错误。在 <pre> 之前关闭  或将 pre 包裹在不同的元素中，如果你想包裹它。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

【讨论】：

是否有任何工作可以解决最终结果的格式不正确。
您希望它如何格式化？
用于使文本按原样显示。
是的，pre>是用来让里面的文字格式化的

【解决方案3】：

参考：https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

在 HTML 中：p 标签被下一个元素隐式关闭。所以

第一个 p 标签以 p 开头并以 b 或 pre 标签结束。（它是隐式关闭的）。
然后解析器找到 /p 结束标记，它没有看到前面的 p 标记。（第一个是隐式关闭的）。

解决方案（从最好到最差）：

当你做更棘手的事情时不要使用 p。你有 pre 标签，所以你应该考虑用 div 或 span 改变你原来的 p
或删除 /p（好主意）
或在 /p 前面添加 p。（有个坏主意 /p ..）

调查的可能解决方案： - XHTML 需要明确的结束 p 标记。您可以尝试使用 XHTML 并让我们知道它是否有效。注意：这对您的问题来说有点矫枉过正......总是很好学习;-)

希望对你有帮助

【讨论】：