Hola buenas a todos los capos, tengo una duda espero me puedan orientar para poder resolverla. Estoy mostrando un arreglo de objeto dentro de una tabla con Angular +2, una de estas variables contiene código html
data: {
...
descripcion: "<ul><li><b>asdasd</b></li><li><b>asdasdasd</b></li><li><b>asdasdasdasd<br></b></li></ul>"
...
}
dentro de una de las celdas donde tengo esta, las muestra de forma literal, y no genera el código html esperado
de esta manera estoy mostrando la data con un *ngFor
<tr *ngFor="let d of riesgos | orderBy:['+num'] | paginate: { itemsPerPage: 10, currentPage: p }" class="text-center">
<!-- Número correlativo -->
<td> <i *ngIf="d.idRiesgo == undefined" (click)="mensajeGuardar()" class="fa fa-bell text-warning cursor" aria-hidden="true"></i> {{ d.num }} </td>
<!-- Descripción -->
<td > {{ d.descripcion }} </td>
<!-- impacto -->
<td> {{ d.impacto }} </td>
<!-- Probabilidad Impacto -->
<td class="">
<i *ngIf="d.probImp == 1" class="fa fa-circle fa-lg text-danger" aria-hidden="true"></i>
<i *ngIf="d.probImp == 2" class="fa fa-circle fa-lg text-warning" aria-hidden="true"></i>
<i *ngIf="d.probImp == 3" class="fa fa-circle fa-lg text-success" aria-hidden="true"></i>
</td>
<!-- Plan de Mitigación -->
<td> {{ d.planMit }} </td>
<!-- Responsable Solución -->
<td> {{ d.responsable.nombre }} </td>
<!-- Fecha Solución -->
<td> {{ d.fecha }} </td>
<!-- Acciones -->
<td class="text-center">
<!-- Editar Riesgo -->
<i (click)="editarRiesgo(d)" aria-hidden="true" class="fa fa-pencil text-primary fa-2x cursor mr-1"></i>
<!-- Eliminar Riesgo -->
<i (click)="borrarRiesgo(d)" aria-hidden="true" class="fa fa-trash text-danger fa-2x cursor"></i>
</td>
</tr>
El gran detalle del que me percate al inspeccionar el código es que me lo muestra de la siguiente manera
<td>
<ul><li><b>asdasd</b></li><li><b>asdasdasd</b></li><li><b>asdasdasdasd
</b></li></ul>
</td>
Como podría interpretar este código para que me muestre las etiquetas HTML de manera correcta? de antemano gracias
SOLUCIÓN: Pude solucionarlo de la siguiente manera
<td [innerHTML]="d.descripcion"> </td>
ngFor
, tu comentarios exponen mas informacion que la misma pregunta. La comunidad te puede ayudar si colocas fragmento de tu api que consultas y la parte donde armas con angular. De seguro angular al detectar que la cadena contiene un html la codifica por seguridad, pero si colocas tu codigo de seguro la comunidad te puede ayudar, Coloque el codigo sin miedo que aqui nadie lo va ha hackear.