Question

我想将表格数据从水平转换为垂直。

我的角度代码如下：

HTML：

<p-dataTable [value]="gridMenuOptions" reflow="true">
    <p-column field="Name" header="Name"></p-column>
    <p-column field="phone" header="phone"></p-column>
</p-dataTable>

.ts：

this.gridMenuOptions = [
    {"Name":"lak","Predicted phone":"0"},
    {"Name":"sar","Predicted phone":"0"}
]

获得如下输出，

    Name   phone
    lak    0
    sar    0

预期输出：

    Name lak   sar
    phone 0     0

Answer 1

首先你需要旋转你的数据 How do you rotate a two dimensional array?

var getArray2d = function(a, x, y) {
   return a[y][x];
 };

 //demo
 var arr = [
   [5, 4, 6],
   [1, 7, 9],
   [-2, 11, 0],
   [8, 21, -3],
   [3, -1, 2]
 ];

 var newarr = [];
 arr[0].forEach(() => newarr.push(new Array(arr.length)));

 for (var i = 0; i < newarr.length; i++) {
   for (var j = 0; j < newarr[0].length; j++) {
     newarr[i][j] = getArray2d(arr, i, j);
   }
 }
 console.log(newarr);

您准备的数据，如果需要，您可能需要将额外信息推送到列中以成为新的标题列。

然后在你的html中，你需要显示二维数组。

 <p-table [columns]="columns" [value]="tableItems" >
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns; let indexOfelement1=index;">
                {{col}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns; let indexOfelement=index;">
            {{rowData[indexOfelement]}}
            </td>
        </tr>
    </ng-template>
</p-table>

如何使用Angular 5 Primeng

1 个答案: