New Line'\\\<br/>'在Typescript中不起作用 [英] New Line &#39;\n&#39; is not working in Typescript

问题描述

我将在打字稿组件中创建一个列表项，并将显示在用户界面中。列表项目应分开显示。所以我添加了下面的新行char \\\
。但是列表项目仍显示在同一行中。以下是代码。任何想法为什么它不起作用？

  @Output（）excludeDisplay：any =''; 
 @Output（）includeDisplay：any =''; 
 includeValues：any =''; 
 excludeValues：any =''; 
 
 this.includeValues + = this.merId +'，'+ this.explodeStatus +'\\\
'; 
 console.log（include values are+ this.includeValues）; 
 this.excludeValues + = this.merId +'，'+ this.explodeStatus +'\\\
'; 
 console.log（排除值是+ this.excludeValues）; 
 this.includeDisplay = this.includeValues; 
 this.excludeDisplay = this.excludeValues; 
  

HTML代码：

 < ul id =excludedUlrequired> {{excludeDisplay}}< / ul> 
< ul id =includedUlrequired> {{includeDisplay}}< / ul> 
  

CSS代码：

  #includedUl {
 float：right; 
宽度：33％; 
} 
 
 #excludedUl {
 float：right; 
宽度：33％; 
 
  

解决方案

\\\
does not 导致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>'; 
  

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?

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:

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

CSS Code:

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

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

解决方案

\n does not cause a line break in html.
You'll need to use a <br/> or wrap your text in a block element.

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>';

这篇关于New Line'\\\<br/>'在Typescript中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！