0

Tengo un problema, he traído un conjunto de registros de mi base de datos para mostrarlos con un NGFOR en mi componente HTML en Angular. Estos registros tienen diferentes datos como fecha, titulo, texto, etc. Todo funcionaba bien pero el TEXTO del registro contiene etiquetas HTML que al hacer la interpolación en el NGFOR se muestran tal cual(se ven las etiquetas en pantalla). He visto que si tienes una variable simple en el TS, agregas un [innerHTML] a la etiqueta en la que quieres mostrar el dato y lo muestra como texto normal respetando las etiquetas que contenía la variable, pero en mi NGFOR no me deja agregar el dato interpolado al [innerHTML]. Por favor, alguien podría darme una pista de como lograr mostrar este dato?

LO QUE ME PASA

Código:

<div *ngFor="let registro of registros; ">
  <p>{{registro.texto}}</p>
</div>

Resultado en pantalla:

<span>Este es mi <b>texto</b></span>

LO QUE NECESITO:

Código(algo así, porque no es posible interpolar en el innerHTML):

<div *ngFor="let registro of registros; ">
    <p [innerHTML]="{{registro.texto}}"></p>
 </div>

Resultado en pantalla:

Este es mi texto

Alguna idea?

1
  • Sin mayúsculas sostenidas siempre será mejor :)
    – Alfabravo
    el 30 oct. 2020 a las 20:47

1 respuesta 1

1

No uses interpolación.

<div *ngFor="let registro of registros; ">
    <p [innerHTML]= "registro.texto"></p>
</div>

O no coloques la propiedad entre corchetes.

<div *ngFor="let registro of registros; ">
    <p innerHTML= "{{registro.texto}}"></p>
 </div>

Referencia

1
  • Muchas gracias :D si me sirvió!!!
    – Barbara ZF
    el 2 nov. 2020 a las 15:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.