0

Estoy intentando crear una tabla como la siguiente:

introducir la descripción de la imagen aquí

Para ello he buscado diversos ejemplos en internet.

He intentado seguir el código y he conseguido lo siguiente:

<table>
    <tr width="35">
      <th>Columna A</th>
      <th>Columna B</th>
      <th>Columna C</th>
      <th>Columna D</th>
      <th>Columna E</th>
    </tr>
    <tr *ngFor="let result of Array">
      <td [attr.rowspan]="result.totalOfAnswers">{{result.infoA}}</td>
      <td [attr.rowspan]="result.totalOfAnswers">{{result.infoB}}</td>
      <td [attr.rowspan]="result.totalOfAnswers">{{result.infoC}} </td>
      <td [attr.rowspan]="result.totalOfAnswers">{{result.infoD}}</td>
      <td *ngFor="let answer of result.userAnswers">{{answer}}</td>
    </tr>
  </table>

*La variable totalOfAnswers contiene userAnswers.length definido en el ts

Con este código consigo lo siguiente:

introducir la descripción de la imagen aquí

Se que debo añadir otro tr para iterar el segundo *ngFor, pero si hago esto, pierdo el valor de result.answer (iterado en el primer tr) ya que debo cerrar entonces el primer tr.

¿Alguna ayuda?

1 respuesta 1

2

Estas haciendo el for sobre el TD por lo que estas agregando mas columnas de las que declaras.

Para hacer que queden una debajo de la otra reemplaza

<td *ngFor="let answer of result.userAnswers">{{answer}}</td>

por una lista dentro del TD

<td>
<ul>
  <li *ngFor="let answer of result.userAnswers">{{answer}}</li>
</ul>
</td>
2
  • Me sirve! He quitado el <li> y he iterado sobre el <ul> para quitar los "puntos" de indexado. Muchas gracias!
    – David_helo
    el 2 jun. 2019 a las 16:56
  • Hola, no elimines las <li>. El tag de html <ul> indica que es un listado y los tag <li> de su interior indican los diferentes items del listado. Para quitar los puntos puedes utilizar el CSS style-decoration:none. el 3 jun. 2019 a las 20:38

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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