angular split().join() 不适用于新行答案

【问题标题】：angular split().join() not working for new lineangular split().join() 不适用于新行
【发布时间】：2020-03-19 09:09:15
【问题描述】：

    let samplestring ="a:b;c:d;e:f"
    this.detail = samplestring.split(";").join("\n");

<div fxLayout="row">
    <span class="default_label_font">{{detail}}</span>
  </div>

但不添加新行并给出响应我得到的响应样本

我也尝试过使用“
”，但不是添加中断而是连接它

我推荐Split string with commas to new line

【问题讨论】：

你如何显示这个字符串？你如何将它的字符串设置为文本？你用什么元素来设置？
在我有问题编辑的弹出窗口中
您也可以使用像"a:b;c:d;e:f".replace(/;/g, '\n') 这样的正则表达式，但新行只会出现在控制台中，而不会出现在必须使用<br> 而不是\n 的HTML 页面中
让我试试 stephane .. 但是为什么这不起作用它应该是正确的？
@Himanshi 查看我的答案以获取更多详细信息，但没有。 \n 根本不被 HTML 渲染，除非被 <pre> 元素渲染。

标签： javascript angular angular8

【解决方案1】：

我认为更简单的另一种方法是使用[innerHtml] (docs) 代替插值和使用<br> 换行。

像这样：

<div fxLayout="row">
  <span class="default_label_font" [innerHtml]="detail"></span>
</div>

let samplestring = "a:b;c:d;e:f";
this.detail = samplestring.split(";").join("<br>");

StackBlitz供你测试和玩。

【讨论】：

仍然给我这个 a:b
c:d
e:f
您是否更新了您的 HTML 以使用 [innerHtml]="detail" 而不是 {{ detail }}，就像我在回答中向您展示的那样？
是的，我以前曾与 {{}} 一起使用过，非常感谢
短解决方案声誉低，因此无法投票，但这有效

【解决方案2】：

如果您需要在单独的行上打印文本，则必须在其间添加<br>。 \n 不会被 HTML 渲染，除非你使用 <pre>。

从component.ts中提取

this.lines = samplestring.split(";");

从component.html中提取

<ng-container *ngFor="let line of lines; i = index">
  <br *ngIf="i != 0">{{line}}
</ng-container>

【讨论】：

【解决方案3】：

问题是您用来设置的元素。 Span 是一个内联组件。所以换行符不起作用。您必须使用块级元素，例如 Div

let samplestring = "a:b;c:d;e:f"
const detail = samplestring.split(";").join("\n");

document.querySelector('.default_label_font').innerText = detail;

<div fxLayout="row">
  <div class="default_label_font"></div>
</div>

【讨论】：

首先，它不是 jQuery。其次，这是为了描绘正确元素的使用。我可以帮你解决问题而不是你的代码

【解决方案4】：

HTML

<h1 id="ovde">
      ...
    </h1>

let customItems = "1,2,3";
  customItems = customItems.split(',');

  for ( let i = 0; i < customItems.length; i++ )
    customItems[i] = "- " + customItems[i] + "\n";

  customItems = customItems.join('');

  document.getElementById("ovde").innerHTML = customItems;

【讨论】：

请有角度的方式
const 元素 = ['Fire', 'Air', 'Water']; console.log(elements.join()); // 预期输出："Fire,Air,Water" console.log(elements.join('')); // 预期输出：“FireAirWater”console.log(elements.join('-'));