Таблица с развернутыми строками - PullRequest
1 голос
/ 02 июня 2019

Я пытаюсь создать таблицу, подобную следующей: enter image description here

Для этого я следил за несколькими примерами в Интернете.

Я достигследующее:

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

Переменная totalOfAnswers содержит userAnswers.length, определенную в ts

С этим кодом я получаю следующее:

enter image description here

Я знаю, что мне нужно добавить еще tr для итерации второго ngFor, но если я это сделаю, я потеряю значение result.answer (повторяется в первом tr*) так как я должен закрыть первое tr.

Спасибо.

1 Ответ

1 голос
/ 02 июня 2019

Я воспроизвел ваше требование в stackblitz . Я не столкнулся с необходимостью закрыть существующий tr.

Дайте мне знать, если я что-то пропустил. Я сделал это двумя способами, просто чтобы увидеть различные варианты.


Обновление: добавлено форматирование пустых ответов.

...