新线＆＃39; \ n＆＃39;不适用于Typescript

Question

我在typescript组件中创建一个列表项，它将显示在UI中。列表项应以单独的行显示。所以我添加了新的字符串\ n如下所示。但是列表项仍然显示在同一行中。下面是代码。知道它为什么不起作用吗？

打字稿代码：

@Output() excludeDisplay: any = '';
@Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';

this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;

Html代码：

<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>

CSS代码：

#includedUl {
  float: right;
  width: 33%;
}

#excludedUl {
  float: right;
  width: 33%;
}

Answer 1

\n 不导致html中的换行符。
您需要使用<br/＆gt;或者将你的文字包装在一个块元素中。

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

或者

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';

Answer 2

需要使用固定宽度：

 <div style="width: 500px;white-space: pre-line">{{property}}</div>

在打字稿中，使用'\ n'添加新行。

Answer 3

如果您仍然需要包含 \n 的原始文本用于其他内容，您可以随时调用 Str.replace 方法，将所有 \n 更改为 <br/> ，因此模板按预期工作。你可以这样做：

this.includeDisplay = this.includeValues.replace(/\n/g, '<br />');

您可以参考MDN docs。