如何在表格中创建效果行

Question

我需要使用第一列创建一个具有特定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>

问题在于：

1. 我不知道rowspan的价值

有人可以帮助我吗？

Answer 1

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

1. 使用rowspan="listCount.length"。
2. 但是只是第一列。要获取列是否为第一列，可以在let first = first中使用*ngFor。
3. 由于此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。

Answer 2

如果您希望列填充整个表，则必须将rowspan属性设置为相等的行数。
为了方便起见，您可以使用Angular ngFor first局部变量来检查第一行。
这是解决方案的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 ];
}

Answer 3

您可以使用[attr.rowspan]，也可以通过遍历td（创建列的集合）来呈现所有columns，并根据需要应用{{1} }至rowspan列。 不确定first是什么：（

*ngIf="check()"