Строка, содержащая <br>, не разрывает строку с ngFor

Question

Я перебираю массив с помощью ngFor. Массив содержит такие строки: «Some Text 1 <br> some text 2». Вот HTML-код:

<div class="content" *ngFor="let item of graphService.contents">{{item}}</div>

Он печатает правильный текст, но не прерывает строку. Он печатает br как обычное слово, но я хочу, чтобы оно сломало черту. Как я могу достичь этого, не разбивая строку на две части, например "Array.firstString + <br> + Array.secondString?

angular frontend

1

MMF 19 Авг 2019 в 14:55

Answer 1

Для предотвращения выхода из HTML вы можете сделать:

    <div class="content" 
         *ngFor="let item of graphService.contents"
         [innerHTML]="item"></div>

1

Louis R 19 Авг 2019 в 12:01

Answer 2

Вы можете использовать это

<div class="content" *ngFor="let item of graphService.contents">
    <div [innerHTML]="item"></div>
</div>

Если вы хотите отобразить простой текст из форматированного текста, вы можете добавить эту функцию.

this.utilService.htmlToPlaintext(content);

Определите функцию htmlToPlaintext(), подобную этой, в вашем сервисе.

htmlToPlaintext(text) {
    var plain = text ? String(text).replace(/\\t/g, '') : '';
    return text ? String(plain).replace(/\\n/g, '') : '';
  }

0

Prashanth Damam 19 Авг 2019 в 12:34

Строка, содержащая <br>, не разрывает строку с ngFor

2 ответа

Похожие вопросы

Новые вопросы

angular