CODEWITHSUNDEEP
angularhtml-table
David_helo
David_helo

Reputation: 187

Table with expanded rows

I am trying to create a table like the following: enter image description here

For this I have followed several examples on the internet.

I have achieved the following:

<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>

The variable totalOfAnswers containsuserAnswers.length defined in the ts

With this code I get the following:

enter image description here

I know I have to add another tr to iterate the second ngFor, but if I do this, I lose the value of result.answer (iterated in the firsttr) since I must close the first tr .

Thank you.

Upvotes: 1

Views: 120

Answers (1)

Jesse
Jesse

Reputation: 2597

I reproduced your requirement in a stackblitz. I didn't run into the necessity of closing the existing tr.

Let me know if I missed something. I did it 2 ways, just to see the various options.

Update: Added in a way to format null responses.

Upvotes: 1

Related Questions