Angular - 在HTML上创建新行

Question

我有一个简单的问题（希望如此）。我有一个返回字符串作为结果的服务。格式类似于：

" 测试1：协会已被接受。\n测试2：协会已被接受。\n" "

在客户端上（我正在使用Angular 1.5.x），我将该字符串放入一个对象中（称为变量$scope.alert.message）。之后，我想在模态框中打印该字符串。我的html是：

<script type="text/ng-template" id="infoTemplate.html">
    <div class="modal-header left" ng-class="['div-' + alert.type, closeable ? 'alert-dismissible' : null]">
        <h3 class="modal-title" id="modal-title">Info</h3>
    </div>
    <div class="modal-body" id="modal-body">
        <img class="imm-info" ng-class="['imm-' + alert.type, closeable ? 'alert-dismissible' : null]" />
        <p class="col-sm-10 col-sm-offset-2">{{alert.message}}</p><button class="col-sm-3 col-sm-offset-5 btn " ng-class="['button-' + alert.type, closeable ? 'alert-dismissible' : null]" ng-click="cancel()">OK</button>
    </div>
</script>

您可以看到'{{alert.message}}'。我的问题是，我的消息不会显示字符'\n'。因此它不会创建多行。这里有一个例子： 示例

- Massimo

---

请提供一些 JSFiddle 或其他实时示例吗？ - Franky238

Answer 1

我使用 white-space: pre-wrap 的 CSS 样式，例如：

<p style="white-space: pre-wrap">{{alert.message}}</p>

- Julien Kronegg

---

这是最佳答案。 - Alfred Francis

Answer 2

在HTML中尝试这个：

<pre>{{ alert.message }}</pre>

已在这里回答：

<pre>标签将以文本形式打印带有 \n 的文本

- Alex Florin

---

这也有一个副作用，即您不能在警报消息中使用HTML标记/它们将按原样呈现。只是要注意的事情。编辑：今天我学到了：那其实也可以。 - phil

我不知道你也可以在其中使用HTML。 :) 我只用它来处理简单的字符串。这是很好的信息。 - Alex Florin

谢谢。这是有用的信息。 - Massimo

Answer 3

\n 在HTML中不会被解释。你需要将这些实例替换为 <br/> 元素。例如，如果你不想更改原始字符串，可以使用正则表达式进行替换。

- phil

Answer 4

您可以编写一个函数，其中您可以通过"\n"将警报消息拆分，然后通过*ngFor迭代它。

例如：

<p *ngFor="let msg of getMessageSplitted(alert.message)">{{msg}}</p>

- Markus G.

---

顺便提一下：尽可能避免在 *ngFor 中使用函数。每次模型更改时，Angular 都会进行许多检查。由于它不知道模型中的更改是否会影响您的函数输出，因此该函数将被调用无数次，并且如果函数执行重操作，则会极大地影响性能。 - Alex Florin