仅将 HTML 元素的字符串转换为 HTML 元素显示 [object HTMLParagraphElement]答案

【问题标题】：Converting String of HTML element to HTML element only Displaying [object HTMLParagraphElement]仅将 HTML 元素的字符串转换为 HTML 元素显示 [object HTMLParagraphElement]
【发布时间】：2021-07-24 02:23:33
【问题描述】：

我正在使用 Angular，我正在使用下面的这个函数来将从 API 数据库接收到的段落 HTML 元素的字符串转换为 HTML

内部角度组件.ts

export class ArtworksComponent implements OnInit {

stringToHTML = function(htmlStr:string) {    

    var wrapper= document.createElement('div');
    wrapper.innerHTML= htmlStr;
    return wrapper.firstChild;
    
}

Component.html 内部

<div class="col-md-4 mb-3" id="container" *ngFor="let artwork of artworks">
        <div >
         {{stringToHTML(artwork.data)}}
        </div>
</div>

我得到的问题是它显示为 [object HTMLParagraphElement]
如果我只是这样做，它会正确显示

 <p>{{artworks.data.replace("<p>,"").replace("</p>, ""}}</p>

但是里面有HTML标签，看起来很乱对数据中的其他 HTML 标记进行多次链接替换。

我 console.log(wrapper.firstChild) 和所需的 HTML 元素是在控制台中生成，只是不会在页面本身上正确显示。是否与检查它是否是安全的 HTML 有关？

【问题讨论】：

标签： javascript html angular string

【解决方案1】：

你可以试试这个：

<div class="col-md-4 mb-3" id="container" *ngFor="let artwork of artworks">
        <div [innerHtml]='stringToHTML'>
        </div>
</div>

【讨论】：

为什么不设置 innerHtml = artifact.data ？