[FIXED] angular *ngfor to display table

Issue

I´m getting multiple same values on table when i call the object list with *ng-for loop.

eg.:
if the object list is :

objList = [{value:value1}]

it will return a table with one row

but if the object list has more than one value :

objList = [{value:value1},{value:value2},{value:value3}]

when the length of the array list is 3 for example, it will display a table with 9 values:

value1
value2
value3
value1
value2
value3
value1
value2
value3

my HTML code(using Prime-NG):

<ng-template pTemplate="body">
          <tr *ngFor="let permissionOrder of objectList">
            <td>{{permissionOrder.value}}</td>
          </tr>
</ng-template>

Solution

you shouldn’t use ngFor. Instead use it like

<p-table [value]="objList">
    <ng-template pTemplate="header">
        <tr>
            <th>Orders</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-permissionOrder>
        <tr>
            <td>{{permissionOrder.value}}</td>
        </tr>
    </ng-template>
</p-table>

Prime ng will automatically loop over array and you will get individual items in permissionOrder

Answered By – Aakash Garg

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published