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

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>