CODEWITHSUNDEEP
angularangular2-templateprimeng
usmanwalana
usmanwalana

Reputation: 1062

Primeng - Cant display array items in a column

I am using primeng datable in Angular 2. My model is an array of products. Every product has an array of locations. That array of locations have a property name . How to display every name of locations array in a row of product?

Example: If first product has 5 name in its locations array, it should display 5 names in locations column

Currently i am doing this.

<p-dataTable [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="5" [responsive]="true">
              <p-column field="name" header="Name" [sortable]="true"></p-column>
              <p-column field="model" header="Model" [sortable]="true"></p-column>
              <p-column field="name" header="Quantity" [sortable]="true"></p-column>
              <p-column field="locations.location.name" header="Locations" [sortable]="true">
              </p-column>
            </p-dataTable>

Upvotes: 2

Views: 3941

Answers (2)

Sachin from Pune
Sachin from Pune

Reputation: 736

Replace Your Field 

 <p-column field="Sessions" [editable]="true" header="Start Date">              
                    <ng-template let-col let-sessions="rowData" let-ri="rowIndex" pTemplate="body">
                         <div>
                            <p>{{sessions.Sessions[0].StartDateTime | date: 'd,MMM,yyyy'}}</p>
                        </div>
                    </ng-template>
                </p-column>

Upvotes: 1

Aravind
Aravind

Reputation: 41581

You should be using ngFor for that particular column check the below code

<p-dataTable [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="5" [responsive]="true">
              <p-column field="name" header="Name" [sortable]="true"></p-column>
              <p-column field="model" header="Model" [sortable]="true"></p-column>
              <p-column field="name" header="Quantity" [sortable]="true"></p-column>
              <p-column field="locations" header="Locations" [sortable]="true">
                    <ng-template let-col let-locations="rowData" let-ri="rowIndex" pTemplate="body">
                        <span *ngFor="let item of locations.location">{{item.name}} <br/></span>
                    </ng-template>
              </p-column>             
</p-dataTable>

Upvotes: 2

Related Questions