Filling primeng table with ngModel data

Question

I cannot figure out how to finish creating my table. I want it to look like this: table, so pretty simple, but I got confused using ng-template and ngFor. First column is the one with "real temperatures" (60,120,140) and T1, T2, T3 are temperatures read from devices T1, T2, T3. Both new devices and real temps should be able to be dynamically added later on, and the data should be editable. I end up having all 3 temperatures in one cell. Where I got stuck you can see on stackblitz.

My data input:


  measmts1: Measurement[] = [ 
                              {id: 'T1', meas_pts: [PT1, PT2, PT3], meas_pt_values: [60.11, 120.11, 140.11]},
                              {id: 'T2', meas_pts: [PT1, PT2, PT3], meas_pt_values: [60.22, 120.22, 140.22]},
                              {id: 'T3', meas_pts: [PT1, PT2, PT3], meas_pt_values: [60.33, 120.33, 140.33]}
                            ];

<div class="card">
    <p-table [value]="measmts1" dataKey="id">

        <ng-template pTemplate="header">
            <!-- <th style="text-align: left;">RealTemp</th> -->
            <th style="text-align: left;" *ngFor="let class of measmts1">{{class.id}}</th>
        </ng-template>

        <ng-template pTemplate="body" let-measmts1>

            <td pEditableColumn >
                <p-cellEditor >

                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="measmts1.meas_pt_values">
                    </ng-template>

                    <ng-template pTemplate="output">
                        {{measmts1.meas_pt_values}}
                    </ng-template>

                </p-cellEditor>
            </td>

        </ng-template>

    </p-table>
</div>

https://stackblitz.com/edit/primeng-tableedit-demo-e1wo57?file=src/app/app.component.html

Happy Coder Happy Coder · Accepted Answer · 2021-03-05T17:23:04

hope this will make you keep going, in <ng-template pTemplate="header" let-columns> add

<th rowspan="1" style="width:auto%;text-align: center" >
                    </th>

complete header snippet

<ng-template pTemplate="header">
       <th rowspan="1" style="width:auto%;text-align: center" >
                    </th>
            <th style="text-align: left;" *ngFor="let class of measmts1">{{class.id}}</th>
        </ng-template>

Filling primeng table with ngModel data

1 Answers