从 JSON 插入片段 HTML 并将其呈现为 HTML

Question

我的模板中有这段代码HTML

    <div *ngIf="alertOptions?.texts">
      <p *ngFor="let paragraph of alertOptions?.texts">
        {{ paragraph }}
      </p>
    </div>

我的 JSON 中的文本是这样的：

Please <b>Call us</b> <a href="tel:+5798643210"> 5798643210</a>.<br>Weekends Chat with us <a href="#">Chat</a>

我知道我需要转义 JSON!

中的引号

"alertOptions":{
    "texts": [
      "Please <b>Call us</b> <a href=\"tel:+5798643210\"> 5798643210</a>.<br>Weekends Chat with us <a href=\"#\">Chat</a>"
    ]
}

但是，我得到

怎么做？

Answer 1

请尝试<div [innerHTML]="paragraph" > </div>

Answer 2

该代码可以工作！

<div *ngIf="alertOptions?.texts">
    <p *ngFor="let paragraph of alertOptions?.texts" [innerHTML]="paragraph"></p>
</div>

从 JSON 插入片段 HTML 并将其呈现为 HTML

Insert snippet HTML from JSON and render it as HTML

html

render

code-snippets

angular