如何在表格中创建效果行跨度答案

【问题标题】：How create create effect rowspan in table如何在表格中创建效果行跨度
【发布时间】：2019-04-12 02:02:46
【问题描述】：

我需要创建一个表，其中第一列具有特定的rowspan。

我想要的结果就像this 详细我想要第一列中的所有行在一起。这是代码.html：

    //This row all toogether in one td
    <tr *ngFor="let count of listCount">
      <ng-container *ngIf="check()">
        <td rowspan="?"....>
        <td>..
      </ng-container>
    </tr>

问题是：

我不知道rowspan它的价值是什么

谁能帮帮我？

【问题讨论】：

标签： javascript html css angular html-table

【解决方案1】：

您可以使用[attr.rowspan]，也可以通过循环columns（创建列集合）来渲染所有td，并且您可以根据需要仅将rowspan 应用于first 列。 不完全确定*ngIf="check()" 是什么:(

<tr *ngFor="let count of listCount">
  <ng-container *ngFor="let column of columns;let first = first; let last = last;">
    <ng-container *ngIf="check()">
        <td [attr.rowspan]="first ? 2: 1"....>
        <td>..
    </ng-container>
  </ng-container>
</tr>

【讨论】：

【解决方案2】：

如果您希望第一列跨越完整的行，您必须：

使用rowspan="listCount.length"。
但只是第一列。要获取列是否在前，可以在*ngFor 中使用let first = first。
由于此 rowspan 计数是动态的，因此您必须使用属性绑定语法 ([attr.rowspan]="listCount.length")。

试试这个：

<tr *ngFor="let count of listCount; let first = first">
  <ng-container *ngIf="check()">
    <td *ngIf="first" [attr.rowspan]="listCount.length" ....>
    <td>..
  </ng-container>
</tr>

这里有一个Sample StackBlitz 供您参考。

【讨论】：

【解决方案3】：

如果您希望您的列填满整个表格，您必须将 rowspan 属性设置为等于行数。
为方便起见，可以使用AngularngForfirst局部变量查看第一行。
这是解决方案的stackblitz demonstration。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <table>
      <tr *ngFor="let i of rows; let isFirstRow = first">
        <!-- only display first column if it is the first row and set rowspan attribute -->
        <td *ngIf="isFirstRow" [attr.rowspan]="rows.length">Column 1</td>
        <td>Row {{i}}, column 2</td>
        <td>Row {{i}}, column 3</td>
      </tr>
    </table>
  `,
  styles: [`
    td {
      padding: 15px;
      border: 1px solid;
    }
  `]
})
export class AppComponent
{
  rows = [ 1, 2, 3 ];
}

【讨论】：