如何在 Ionic 变量 {{list.TAG}} 上添加 [innerHTML]

Question

我正在从 home.ts 获取值并使用 ngFor。我在 home.html.

上显示值

一切正常，但 html 数据未呈现其属性，因为我直到现在才使用 [innerHTML]。

如何使用 html 属性呈现我的代码？

我当前的home.html代码

<div id="c1"> {{list.TAG}} </div>

<!-- below line of code renders the data with html properties -->
<div id="c1" [innerHTML]="theHtmlString"></div>

home.ts代码

          this._http.get(this._url + this.SNO + "&" + this.randomno, {headers: headers})
      .subscribe(data => {
        this.list = data.json();

// this works fine on html
this.theHtmlString = `<b>hii</b>`

目前我的数据是这样加载的，见下图：

Answer 1

您应该尝试使用 DOMSanitizer。 Angular 可能不信任传递给 {{list.TAG}}

的 HTML 字符串

https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustHtml

    constructor(private sanitizer: DomSanitizer) {}

sanitize(html) {
    return sanitizer.bypassSecurityTrustHtml(html) ;
}

那么你的HTML可以

<div id="c1" [innerHTML]="sanitize(list.TAG)"></div>

如何在 Ionic 变量 {{list.TAG}} 上添加 [innerHTML]

How to add [innerHTML] on variable {{list.TAG}} in Ionic

javascript

ionic-framework

ionic2

ionic3

angular