转置 HTML 表（PrimeNG 7.x 的 p 表）答案

【问题标题】：Transpose HTML table (p-table with PrimeNG 7.x)转置 HTML 表（PrimeNG 7.x 的 p 表）
【发布时间】：2019-05-15 15:20:00
【问题描述】：

我正在为一个 Angular 应用程序创建一个 table with PrimeNG。它应按班级显示学生人数。我想构建的是一张表，其中一列是班级名称，一列是学生人数。我需要的是一个用于班级名称的 ROW 和一个用于学生人数的 ROW。有没有（干净的代码兼容）方法来转置表格？

这是表格html：

<p-table [value]="getData()">
    <ng-template pTemplate="header">
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <tr>
            <td class="legend-cell" >
                {{data.className}}
            </td>
            <td class="non-edit-cell" >
                {{data.numStudents}}
            </td>
        </tr>
    </ng-template>
</p-table>

这是我的虚拟数据：

  getData(){
    let data = [];
    data.push({className: 'Class 1', numStudents: 22})
    data.push({className: 'Class 2', numStudents: 23})
    data.push({className: 'Class 3', numStudents: 24})

    return data;
  }

结果表：

我想要什么（我血腥地硬编码了这个）：

【问题讨论】：

标签： angular typescript html-table primeng

【解决方案1】：

好的，有一个非常直观的解决方案。我以前从未在桌子上见过：

您还可以将行放入列中，而不仅仅是将列放入行中：

<p-table [value]="getData()">
    <ng-template pTemplate="header">
    </ng-template>
    <ng-template pTemplate="body" let-data>
      <td>
        <tr>{{data.className}}</tr>
        <tr>{{data.numStudents}}</tr>
      </td>
    </ng-template>
</p-table>

你也可以在没有行的情况下将第一行作为标题：

<p-table [value]="getData()">
    <ng-template pTemplate="header">
        <th *ngFor="let class of getData()">{{class.className}}</th>
    </ng-template>
    <ng-template pTemplate="body" let-data>
        <td>
            {{data.numStudents}}
        </td>
    </ng-template>
</p-table>

【讨论】：

【解决方案2】：

你可以像下面这样解决它。不要使用表格，而是使用 <div> 和 CSS 属性：

<p-table [value]="getData()">
    <ng-template pTemplate="body" let-data>
        <div style="display:inline-block;">
              {{data.className}}
          <div>{{data.numStudents}}</div>
        </div>
    </ng-template>
</p-table>

您可以使用多个 CSS 属性。喜欢 Flex，但我只是给你一个解决方案。

【讨论】：