Html 新行“\n”在打字稿中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44743813/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
New Line '\n' is not working in Typescript
提问by Poonkodi Sivapragasam
I am creating a list item in typescript component which will be displayed in the UI. The List items should be displayed in separate lines. So i added new line char \n as below. But still the list items are shown in same line. Below is the code. Any idea why it doesn't work?
我正在打字稿组件中创建一个列表项，该列表项将显示在 UI 中。列表项应显示在单独的行中。所以我添加了新行 char \n 如下。但是列表项仍然显示在同一行中。下面是代码。知道为什么它不起作用吗？
Typescript Code:
打字稿代码：
@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 Code:
html代码：
<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>
CSS Code:
CSS 代码：
#includedUl {
float: right;
width: 33%;
}
#excludedUl {
float: right;
width: 33%;
}
回答by Nitzan Tomer
\ndoes notcause a line break in html.
You'll need to use a <br/> or wrap your text in a block element.
\n也不会引起HTML换行符。
您需要使用<br/> 或将文本包裹在块元素中。
this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';
Or
或者
this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
回答by Palash Roy
Need to use fix width:
需要使用固定宽度：
<div style="width: 500px;white-space: pre-line">{{property}}</div>
In typescript use '\n' to add new line.
在打字稿中使用 '\n' 添加新行。
