innerHtml无法在角度5中工作

Question

我正在尝试显示包含换行符和换行符的json字符串; \r和\n

这是json：

 {
   "Content": "OFCH\r\nPVC Double Glazed Windows\r\nMains Services"
 }

这是HTML：

<p class="PropertyBrochure__DescriptionContent" [innerHTML]="description.Content"></p>

这是输出：

OFCH PVC Double Glazed Windows Mains Services

正如您所看到的那样，json字符串中的\r\n被剥离并被忽略。我错过了什么吗？

Answer 1

回车既不剥离也不忽略。 Angular将解析HTML为：

<p class="PropertyBrochure__DescriptionContent">OFCH
PVC Double Glazed Windows
Mains Services</p>

问题是浏览器的HTML渲染器会折叠空白区域，并希望您使用<br>元素来强制换行。

或者，您可以使用CSS控制浏览器对空格的处理（请参阅文档here）：

.PropertyBrochure__DescriptionContent { white-space: pre; }

<p class="PropertyBrochure__DescriptionContent">OFCH
PVC Double Glazed Windows
Mains Services</p>