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>

有关演示，请参见this stackblitz。

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>

这是您推荐的Working Sample Stackblitz。

如何在Angular HTML中使用rowspan生成表行？

2 个答案: