包含<br>的字符串不与ngFor换行

Question

我使用ngFor遍历数组。该数组包含以下字符串：“某些文本1 <br>一些文本2”。这是HTML：

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

它会打印正确的文本，但不会换行。它像普通单词一样打印br，但我希望它能打破常规。如何在不将字符串分成“ Array.firstString + <br> + Array.secondString之类的两个”的情况下实现该目标？

Answer 1

为了防止转义HTML，您可以执行以下操作：

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

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, '') : '';
  }