Как генерировать строки таблицы с помощью rowspan в угловых HTML?

Question

Я хочу перебрать список данных для генерации строк таблицы, но я не знаю, как реализовать цикл, когда ячейки в одном столбце имеют атрибут rowspan.

Моя разметка шаблона:

<div class="table-responsive" >
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <tr>
      <td rowspan="3">{{data.name}}</td>
      <td>{{data.number1}}</td>
    </tr>
    <tr>
      <td>{{data.number2}}</td>
    </tr>
    <tr>
      <td>{{data.number3}}</td>
    </tr>
  </table>
</div>

Answer 1

Вы можете применить директиву ngFor к элементу ng-container и вставить группу из 3 строк таблицы внутри этого контейнера:

<div class="table-responsive">
  <table class="table table-striped">
    <tr>
      <th>Project Name</th>
      <th>Project Number</th>
    </tr>
    <ng-container *ngFor="let data of projects">
      <tr>
        <td rowspan="3">{{data.name}}</td>
        <td>{{data.number1}}</td>
      </tr>
      <tr>
        <td>{{data.number2}}</td>
      </tr>
      <tr>
        <td>{{data.number3}}</td>
      </tr>
    </ng-container>
  </table>
</div>

См. этот стек * блиц для демонстрации.

Answer 2

Попробуйте:

<div class="table-responsive">
    <table class="table table-striped" border="1">
        <thead>
            <tr>
                <td rowspan="3">Project Name</td>
                <td>Project Number</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of projects">
                <td>{{data.name}}</td>
                <td>
                    <tr>{{data.number1}}</tr>
                    <tr>{{data.number2}}</tr>
                    <tr>{{data.number3}}</tr>
                </td>
            </tr>
        </tbody>
    </table>
</div>

---

Вот вам Рабочий образец Stackblitz для вашей ссылки.