Question

我有一个数据集，我正在用角材料表（使用角6）显示该数据集。已遵循此documentation link来执行此操作。我一直在寻找一种优化/整洁的方式将行表示为列，将列表示为行

这是我的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 = [{ 名称：“ Enterprise”， rowsInMillion：“自定义”，价格：“自定义”， extraPerMillion：“自定义”， noOfIntegrations：“无限制” }，{ 名称：“标准”， rowsInMillion：10，价格：10， extraPerMillion：1 noOfIntegrations：10' }];

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

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

0 个答案: