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
    Commented 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. Commented el 3 jun. 2019 a las 20:38

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.