首页 文章

如何在angular html中生成带有rowspan的表行？

提问于
浏览 次
1

我想迭代一个数据列表来生成表行但我不知道当一列中的单元格具有 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>
html angular

2 回答

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

    回复于
  • 0

    尝试一下：

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

    回复于

相关问题