以角度 6 垂直显示数据表（材质）

Question

我有一个数据集，正在角度材料表中显示（使用角度 6）。已按照此文档链接执行此操作。我一直在寻找一种优化/简洁的方法来将行表示为列，将列表示为行

这是我的html：

<table mat-table [dataSource]="subscriptionPlans" class="mat-elevation-z8 subscription-table text-left">
    <ng-container matColumnDef="subscription">
      <th mat-header-cell *matHeaderCellDef> Subscription </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="rows">
      <th mat-header-cell *matHeaderCellDef> Rows in million </th>
      <td mat-cell *matCellDef="let element"> {{(element.rowsInMillion) ? element.rowsInMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef> Pricing </th>
      <td mat-cell *matCellDef="let element"> {{(element.price) ? element.price : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="additionalPricing">
      <th mat-header-cell *matHeaderCellDef> Pricing for additional 1 million rows </th>
      <td mat-cell *matCellDef="let element"> {{(element.extraPerMillion) ? element.extraPerMillion : 'custom'}} </td>
    </ng-container>

    <ng-container matColumnDef="numberOfIntegrations">
        <th mat-header-cell *matHeaderCellDef> Number of integrations </th>
        <td mat-cell *matCellDef="let element"> {{(element.noOfIntegrations) ? element.noOfIntegrations : 'custom'}} </td>
      </ng-container>

      <ng-container matColumnDef="subscriptionRadio">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element"> 
              <mat-radio-button class="example-radio-button" [value]="element.subscriptionId"></mat-radio-button>  
          </td>
      </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

这是我要绑定的数据： subscriptionPlans = [ { name: 'Enterprise', rowsInMillion: 'custom', Price: 'custom', extraPerMillion: 'custom', noOfIntegrations: 'unlimited' },{ name: 'Standard' ，rowsInMillion：10，价格：10，extraPerMillion：1，noOfIntegrations：10'}];

这段代码工作正常，但我无法弄清楚如何使用相同的数据显示行和列互换的表（垂直显示表）。有一种丑陋的方式来遍历数据并更改订阅计划的结构，但这是一种非常糟糕的方式。希望我清楚这个问题。