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

Question

我想在 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"): 

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

Answer 1

该<pre>标签是块级元素。当它被放置在里面时，<p>...</p>它会像</p>导致它关闭并在它到达你的</p>. 如果您希望将它包裹起来，请<p>在您的之前关闭<pre>或将其包裹pre在不同的元素中。

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

Answer 2

来自html.com：

结束<p>标记是可选的，并且由开始标记之后的 HTML 文档中遇到的下一个 HTML 元素的开始标记隐含<p>。