格式化数据块

Question

我使用以下Angular代码将文本格式设置为个人资料页面中的数据块：

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

CSS代码：

.details-wrapper {
  padding: 20px 0;

  h4 {
    margin-bottom: 0;
  }

  .activity {
    margin-bottom: 20px;
    font-size: .8em;
    color: #9e9e9e;
  }

  p {
    .label {
      display: inline-block;
      width: 100px;
      margin-right: 10px;
    }
  }
}

但是我得到了视觉效果：

您可以看到XML数据未正确对齐。有什么方法可以像其他文字一样对齐它吗？

Answer 1

我认为您可以使用[innerHTML]并将内容传递到pre标签中。但是，您需要确保正确使用它。

<p><b class="label">Raw Response</b>
  <pre [innerHTML]="apiattempt.raw_response"></pre>
</p>

  

元素中的文本以固定宽度的字体（通常是Courier）显示，并且保留空格和换行符。