显示包含HTML代码的字符串

我有一个字符串，其中包含以下HTML代码：

             <div>
                <TextSubtitle [color]="'#B3B4B4'" [bold]="'true'">Datos Personales del Solicitante</TextSubtitle>
                <div style="margin-top: 20px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Primer nombre *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Segundo nombre *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Apellido paterno *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Apellido materno *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Fecha de nacimiento *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Género *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Ocupación *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Dependientes económicos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'Estado civil *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'Número de hijos *'"></InputItem>
                </div>
                <div style="margin-top: 10px;display: flex;justify-content: space-between">
                    <InputItem style="width: 47%" [label]="'RFC *'"></InputItem>
                    <InputItem style="width: 47%" [label]="'CURP *'"></InputItem>
                </div>
            </div> 

HTML文件：

<div>
    {{doc.firstChild.innerHTML}}
</div>

{{doc.firstChild.innerHTML}

这将在屏幕上以字符串形式打印实际的HTML代码。

您需要使用

bypassSecurityTrustHtml

方法来使用并告知您的内容是安全的。如果要呈现整个文档，还需要将

firstChild.innerHTML

替换为

doc.body.outerHTML

---

下面是[innerHTML]=上的示例，它只显示第一个html元素，没有styles@I当然，这是因为你使用了

firstChild.innerHTML

。请看我的最新答案，并以stackblitz为例

<div>
    {{doc.firstChild.innerHTML}}
</div>