angular split (). Join () не работает для новой строки

Question

    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>

, но я не добавляю новую строку и не отвечаю, как образец ответа, который я получаю

Я пытался использовать " "тоже, но вместо добавления разрыва он объединяет его

Я ссылаюсь Разделить строку запятыми на новую строку

Answer 1

Другой способ сделать это, я думаю, намного проще, это использовать [innerHtml] ( документы ) вместо интерполяции и разбивать строки с помощью <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 для тестирования и игры.

Answer 2

Если вам нужно напечатать текст в отдельных строках, вам нужно будет добавить <br> между ними. \n не отображается HTML, если вы не используете <pre>.

извлечение из component.ts

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

извлечение из компонента. html

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

Answer 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>

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