新行'\n'在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

需要使用固定宽度：

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

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

Answer 2

\n也不会引起HTML换行符.
您需要使用<br/>或将文本包装在块元素中.

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 3

如果信息仅显示在 HTML 中，则可以使用 CSS 属性white-space。对于仅破坏 '\n' 字符，那么这应该按照此处white-space: pre-line;提到的方式工作，并且对于文档检查MDN。