如何显示来自Angular中单个元素的段落以及所需的字符答案

【问题标题】：How to display paragraphs coming from a single element in Angular with the required characters working如何显示来自Angular中单个元素的段落以及所需的字符
【发布时间】：2022-01-11 15:43:54
【问题描述】：

我在 view.component.ts 文件中有一个来自后端的对象。它应该是产品的描述。它有超过 500 行文本。例如：

{"description" : "Hello my Name is Param Bedi.\r\nHow are you\r\n\r...continue till 500 lines and more"}

我需要将其显示到 Angular 视图。但它只是直截了当，即包含所有“\r\n”等。它没有插入新行而不是\n。

这就是我在 view.component.html 中所做的

<div>
  <p>{{ data["description"] }}</p>
</div>

我应该怎么做才能显示带有换行符和其他特殊字符的数据？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

你可以使用HTMLElement.innerText:

<div>
  <p [innerText]="data.description"></p>
</div>

或者，如果您需要特殊字符输出，请使用Element.innerHTML（将新行替换为<br>）：

<div>
  <p [innerHTML]="data.description.replace(/(\r\n|\r|\n)/g, '<br>')"></p>
</div>

【讨论】：

它实际上工作并插入了新行和其他字符。但是一些角色仍然出现。例如 •
我发现如果我使用 [innerHTML] 而不是 [innerText]，则使用特殊字符，例如 •像子弹一样来。但这会导致换行符不起作用。
@ParamBedi 使用innerHTML查看更新的答案
是的。这个解决方案奏效了！非常感谢你的努力。非常感谢您的帮助！

【解决方案2】：

解决方案 1：您可以在 css 中使用 white-space: pre-line。你可以在这里查看CSS White Space。

解决方案 2：您可以将 Textarea 与 readonly 一起使用。

&lt;textarea name="description" readonly [(ngModel)]="data.descrption" style="resize: none;" &gt;&lt;/textarea&gt;

【讨论】：

这可行，但仍有一些字符像 •