javascript/angular：通过字符串添加“换行符”答案

【问题标题】：javascript/angular: add 'line break' via stringjavascript/angular：通过字符串添加“换行符”
【发布时间】：2021-02-04 12:22:38
【问题描述】：

我的 .ts 文件中有这个方法，它从 obj.date 和 obj.status 创建一个字符串。
现在我使用多个（确切地说是八个）\xa0（一个十六进制编码的 nbsp）在日期和状态之间留出一些空间。
结果字符串：17/11/2020 done
然后绑定到模板中。

我宁愿使用换行符，让它看起来像这样：
17/11/2020
完成

dateWithStatus(obj) {
  return
    moment.utc(object.date).format(DATE_FORMAT)
    + Array(8).fill('\xa0').join('')
    + object.status;
}

我的问题是 - 我应该使用什么十六进制代码而不是 \xa0 来强制换行？
\n 和 \r\n 似乎都不起作用。

PS：是的，我确实在 stackoverflow（以及其他网站）中搜索了答案，但无济于事。

=== 更新 === 我在（Angular）模板文件中测试了字符串字面量。

组件.ts

testString = `abcd
efgh
ijkl`;

组件.html

<span>{{testString}}</span>

结果：所有字母都在一行中
abcd efgh ijkl

【问题讨论】：

你不能使用模板文字（反引号）吗？
我确实尝试了反勾号，但结果是一样的。它只产生了一个空格。
所有答案都涉及我仅为测试目的而选择的
标签。应用中包含文本的标签实际上是，所以我在测试示例中也进行了更改。

标签： javascript angular

【解决方案1】：

其中一种方法是向您的元素添加一个类，例如testString，如下所示：-

.testString{
white-space:pre
}

white-space:pre 应该允许在\n 个字符处中断。

【讨论】：

【解决方案2】：

您可以使用safeHtml 管道来完成。

// component.ts
...
testString = 'Hello<br>world!';
...

// component.html
<h2 [innerHtml]="testString | safeHtml"></h2>

【讨论】：

【解决方案3】：

您可以在字符串中添加换行符，然后绑定元素的 innerText 属性：

<h2 [innerText]="testString"></h2>

testString = 'first line' + ' \n ' + ' second line';

【讨论】：

@PaxForce 抱歉，您对 innerText 的看法是正确的，您需要使用 \n 来换行。在显示通过 textarea 输入捕获的文本并保留新行和空格时很有用

标签。应用中包含文本的标签实际上是，所以我在测试示例中也进行了更改。