1

he creado una tabla en Angular donde estoy haciendo llamado a un arreglo de "Personas", en donde muestro su nombre, apellido y numero de celular que trabaja como componente padre. El problema aparece cuando intento enviar mediante un *ngFor los datos de dicha clase a un componente hijo, dándome la estructura de la siguiente forma:

<table class="table table-hover">
      <thead class="table-warning">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Nombre</th>
          <th scope="col">Apellido</th>
          <th scope="col">Celular</th>
        </tr>
      </thead>
      <tbody>
        <app-persona *ngFor="let personaElemento of personas; let i = index"
        [persona] = "personaElemento"
        [indice] = "i">
        </app-persona>
      </tbody>
  </table>

Pero a la hora de revisar en el servidor dicha tabla, se visualiza de la siguiente forma: introducir la descripción de la imagen aquí

He intentado desde el componente hijo adherirme a los elementos de la tabla con el siguiente codigo en .html, pero del mismo resultado, me aparece igual que la imagén mostrada arriba:

<tr>
  <td>{{indice+1}}</td>
  <td>{{persona.nombre}}</td>
  <td>{{persona.apellido}}</td>
  <td>{{persona.celular}}</td>
</tr>

EDIT: En solicitud de @PabloLozano, adjunto a la pregunta el codigo que aparece en consola del HTML:

introducir la descripción de la imagen aquí

6
  • ¿Puedes mostrar el HTML generado por angular? Commented el 30 nov. 2022 a las 14:50
  • @PabloLozano Perdona ¿A que HTML te refieres?, Los 2 códigos de arriba son los 2 componentes de padre-hijo en HTML
    – Decox
    Commented el 30 nov. 2022 a las 15:23
  • 1
    Esas son las plantillas, me refiero al código generado que se ve en el navegador Commented el 30 nov. 2022 a las 16:20
  • @PabloLozano Ahh okey, ahi lo adjunto en la pregunta de arriba
    – Decox
    Commented el 30 nov. 2022 a las 16:26
  • Creo que sería mejor que el ngFor esté en tu etiqueta <tr> y recorres a cada <td> con los elementos. Commented el 30 nov. 2022 a las 16:31

1 respuesta 1

1

Creo que es un problema de estilos: si el display de los elementos no es el correcto, la tabla deja de comportarse como tal:

const $ = document.querySelector.bind(document);

$('button').addEventListener('click',() => {
  $('tbody').classList.toggle('inline');
  console.log(getComputedStyle($('tbody')).display);
});
table {
  border-collapse: collapse;
}
tbody.inline{
   display: inline;
}

td,th{
  border: 1px solid gray;
  border-collapse: collapse;
}
<table class="table table-hover">
    <thead class="table-warning">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nombre</th>
        <th scope="col">Apellido</th>
        <th scope="col">Celular</th>
      </tr>
    </thead>
    <tbody>
      <app-persona>
        <tr>
          <td>1</td>
          <td>nombre</td>
          <td>apellido</td>
          <td>celular</td>
        </tr>
      </app-persona>
    </tbody>
</table>

<button>Cambia estilo</button>

1
  • Esta fue, muchas gracias!
    – Decox
    Commented el 30 nov. 2022 a las 18:22

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.