1

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

introducir la descripción de la imagen aquí 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>
                &lt;ul&gt;&lt;li&gt;&lt;b&gt;asdasd&lt;/b&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;asdasdasd&lt;/b&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;asdasdasdasd
                &lt;/b&gt;&lt;/li&gt;&lt;/ul&gt; 
</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>
17
  • 1
    ¿Puedes por favor poner el código con el que manipulas la respuesta de la API para presentarla en pantalla? Incluyendo los encabezados del HTML.
    – A. Cedano
    el 4 dic. 2018 a las 15:17
  • 1
    @Elleiton tu pregunta debio contener que estas usando asp, que estas usando angular con la directiva 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. el 4 dic. 2018 a las 15:39
  • 1
    Te dejo un enlace a stackoverflow en ingles donde preguntan como insertar un html en la vista y otro enlace a un post sobre como preservar el html el 4 dic. 2018 a las 15:50
  • 1
    @OrlandoDeLaRosa no pensé que tuviera que ver con la directiva de angular, muchas gracias por la respuesta. Saludos
    – Shogun
    el 4 dic. 2018 a las 17:15
  • 1
    @Elleiton te invito a que pases y leas en el centro de ayuda a como ¿Puedo responder a mi propia pregunta? el 4 dic. 2018 a las 17:48

2 respuestas 2

3

Puedes usar una función que te sustituya dichos valores por su símbolo correspondiente, te dejo un ejemplo:

$('#test').each(function(){
    var $this = $(this);
    var t = $this.text();
    $this.html(t.replace('&lt','<').replace('&gt', '>'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-hover animated fadeIn" style="white-space: pre-wrap;">
    <thead class="" style="font-size: 14px;">
        <tr class="text-center">
            <th width="5%">N°</th>
            <th width="20%">Descripción</th>
            <th width="20%">Impacto</th>
            <th width="10%">Probabilidad</th>
            <th width="18%">Plan de Mitigación</th>
            <th width="10%">Responsable</th>
            <th width="10%">Fecha Solución</th>
            <th width="7%"></th>
        </tr>
    </thead>

    <tbody style="font-size: 12px;">

        <tr class="text-center ng-star-inserted">
            <td> 1 </td>
            <td> asdasd [1] </td>
            <td> asdasd </td>
            <td class="">
                <i aria-hidden="true" class="fa fa-circle fa-lg text-warning ng-star-inserted"></i>
            </td>
            <td> asdasdasd </td>
            <td> Tomas Pablo Rieutord Valencia </td>
            <td> 05-12-2018 </td>
            <td class="text-center"><i aria-hidden="true" class="fa fa-pencil text-primary fa-2x cursor mr-1"></i><i
                 aria-hidden="true" class="fa fa-trash text-danger fa-2x cursor"></i></td>
        </tr>
        <tr id="test" class="text-center ng-star-inserted">
            <td>
                3 </td>
            <td>
                &lt;ul&gt;&lt;li&gt;&lt;b&gt;asdasd&lt;/b&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;asdasdasd&lt;/b&gt;&lt;/li&gt;&lt;li&gt;&lt;b&gt;asdasdasdasd
                &lt;/b&gt;&lt;/li&gt;&lt;/ul&gt; </td>
            <td> asdasdas </td>
            <td class="">
                <i aria-hidden="true" class="fa fa-circle fa-lg text-success ng-star-inserted"></i></td>
            <td> dasdasdasd </td>
            <td> Javier Parga Yavar </td>
            <td> 02-12-2018 </td>
            <td class="text-center"><i aria-hidden="true" class="fa fa-pencil text-primary fa-2x cursor mr-1"></i><i
                 aria-hidden="true" class="fa fa-trash text-danger fa-2x cursor"></i>
            </td>
        </tr>
    </tbody>
</table>

En este caso se utilizó JQuery para apuntar al tr correspondiente con el id="test", posteriormente se sustituyó el texto por sus valores < y >.

Espero te ayude.

2
  • Creo que hay que buscar más a fondo por qué se origina ese problema. Puede que en alguna parte se esté aplicando encode_entities, pues en un comentario el OP dice que los datos vienen correctos desde la API y luego le aparecen como entidades HTML.
    – A. Cedano
    el 4 dic. 2018 a las 15:10
  • Tienes razón, dí esta respuesta en base a lo que se solicitó desde un principio, una vez que llegaron más a fondo en los comentarios queda más claro de donde se generó el incidente. Igual dejaré la información por si alguien se beneficia de ella. Saludos. el 4 dic. 2018 a las 18:14
0

SOLUCIÓN: Pude solucionarlo de la siguiente manera

<td [innerHTML]="d.descripcion"> </td>

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.