4

我有一个数据集，我在一个角材料表中显示（使用角 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, price: 10, extraPerMillion: 1, noOfIntegrations: 10' }];

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

4

0 回答 0