Question

我正在为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;
  }

结果表：

我想要什么（我对此进行了血腥编码）：

Answer 1

您可以按照以下方式解决它。不要使用表格，而是使用<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一样，但我只是为您提供解决方案。

Answer 2

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

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

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

转置HTML表（带有PrimeNG 7.x的p表）

2 个答案: