Reputation: 1062
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
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
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