模板解析錯誤：意外的結束標記“ 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> 在<pre> <p>之前關閉<p> ，或者如果希望將pre包裝，則將其包裝在其他元素中。

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

Answer 2

來自html.com ：

結束<p>標記是可選的，並且隱含在開始<p>標記之后HTML文檔中遇到的下一個HTML元素的開始標記。

Answer 3

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

在HTML中：p標記被next元素隱式關閉。 所以

• 第一個p標簽以p開頭，以b或pre標簽結束。 （它是隱式關閉的）。
• 然后，解析器將找到/ p結束標記，而該標記沒有看到前面的p標記。 （第一個隱式關閉）。

解決方案（從最好到最壞）：

• 當您做更多棘手的事情時，請不要使用p。 您具有pre標簽，因此您應考慮使用div或span更改原始p
• 或放/ p（好主意）
• 或者在/ p前面添加p。 （有/ p ..的好主意。）

研究的可能解決方案：-XHTML需要顯式關閉p標簽。 您可以嘗試使用XHTML，並讓我們知道它是否有效。 注意：這對於您的問題來說有點過大了……學習總是很不錯的;-)

希望這可以幫助