如何在 angular 的primeng表的第一列中显示数组字符串

Question

I have a string of array and I want to display that array in first column of the table like this

    c1 c2 c3 c4 c5 c6
    d1 -  -  -  -  -
    d2 -  -  -  -  -
    d3 -  -  -  -  -
    d4 -  -  -  -  -

the string of array is like this

    data: string[] = ['d1', 'd2', 'd3', 'd4',];

so here is my html code

<p-table [columns]="panel.headers" [value]="panel.data">
   <ng-template pTemplate="header" let-columns>
      <tr *ngFor="let headerRow of panel.headers">
       <th *ngFor="let col of headerRow.cols" [attr.colspan]="col.colspan"
       [attr.rowspan]="col.rowspan">
           {{col.label}}
       </th>
     </tr>
   </ng-template>
   <ng-template pTemplate="body" let-row>
    <tr>
     <td *ngFor="let col of panel.headers[panel.headers.length-1].cols"
       class="{{row[col.dataClasses]}}">
       {{row[col.valueField]}}
     </td>
    </tr>
  </ng-template>
</p-table>

See the stackblitz https://stackblitz.com/edit/primeng-tabledynamic-demo-h58rsj in this example, I want to print tiers in the first column. please help to solve this.. Thanks

Answer 1

Just add the column at the beginning:

 <ng-template pTemplate="body" let-row>
      <tr>
       <td>my array goes here</td>
       <td *ngFor="let col of panel.headers[panel.headers.length-1].cols"
         class="{{row[col.dataClasses]}}">
         {{row[col.valueField]}}
       </td>
      </tr>
    </ng-template>

And in your header:

<ng-template pTemplate="header" let-columns>

        <tr *ngFor="let headerRow of panel.headers">
        <th></th>
         <th *ngFor="let col of headerRow.cols" [attr.colspan]="col.colspan"
         [attr.rowspan]="col.rowspan">
             {{col.label}}
         </th>
       </tr>
     </ng-template>