Home > Mobile >  angular *ngfor to display table
angular *ngfor to display table

Time:12-24

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>

CodePudding user response:

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

  • Related