如何在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>