I am using primeng picklist in my project with turbo-table and want a little help in setting the source list.I have a master list that contains different lists.What I want is for each row of the table set the fetch the corresponding list from the master list array based on the id of that row.I don't know how to achieve this.Right now I'm setting source to the first element of the masterARR but I want to set it to the element based on the row id of the table. Please help.Thanks in advance.
Here is my template:
<p-table [columns]="cols" #dt [value]="students" [autoLayout]="enable" dataKey="id" >
<ng-template pTemplate="header" let-columns>
<tr>
<th style="width: 3em"></th>
<th>Id</th>
<th>NAME</th>
<th>Roll No</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td>{{rowData.id}}</td>
<td>{{rowData.name}}</td>
<td>{{rowData.rollno}}</td>
</tr>
</ng-template>
</p-table>
<p-dialog [(visible)]="display" [modal]="true" [responsive]="true" [style]="{width: '650px', minWidth: '200px'}" [minY]="70" [maximizable]="true" [baseZIndex]="10000">
<p-pickList (onMoveToTarget)="onChange($event)" [source]="masterArr[0]" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true" filterBy="name" dragdrop="true" sourceFilterPlaceholder="Search by name" targetFilterPlaceholder="Search by name"
[sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
<ng-template let-hero let-rowdata pTemplate="item">
<div>
<div class="ui-helper-clearfix">
<div style="font-size:14px;float:right;margin:15px 5px 0 0"> {{hero.value}}</div>
</div>
</div>
</ng-template>
</p-pickList>
Here is my ts code:
this.arr1.push("A1");
this.arr1.push("A2");
this.arr2.push("D1");
this.arr2.push("D2");
this.masterArr.push(this.s);
this.arr.push(this.d);