Angular primeNg pEditableColumn dropdown onChange event

Question

I have a p-table with p-editable column which is a dropdown as follows:

<ng-template pTemplate="body" let-rowData let-columns="columns" let-editing="editing">
    <tr style="font-size:10px;" [pEditableRow]="rowData" >
        <ng-container *ngFor="let col of columns" [ngSwitch]="col.field">
            <td *ngSwitchCase="'dob'" [colSpan] = "1">
                {{rowData[col.field] | date: 'dd-MMM-yyyy hh:mm'}}
            </td>
            <td *ngSwitchCase="'updated'" [colSpan] = "1">
                {{rowData[col.field] | date: 'dd-MMM-yyyy hh:mm'}}
            </td>
            <td *ngSwitchCase="'assignedTo'" [colSpan] = "1" pEditableColumn>
                <p-cellEditor>
                <ng-template pTemplate="input">
                    <p-dropdown [options]="assigneList"  [(ngModel)]="rowData[col.field]" (onChange)="changeAssigne($event)" ></p-dropdown> 
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData[col.field]}}
                </ng-template>
                </p-cellEditor>
            </td>
            <td *ngSwitchDefault [colSpan] = "1">
                {{rowData[col.field]}}
            </td>
        </ng-container>
    </tr>
</ng-template>

As per primeNg documentation assigneList has a label, value in addition I have an id field that is unique for each row.

My dropdown works perfectly fine foreach row and corresponding element gets selected perfectly. However, I have a requirement where onChange of dropDown I have to update the DB.

My onChange function which is changeAssigne(event), currently displays only value. I want the onChange to give me the entire object.

Component.ts code

...///
assigneList : BoardAssigneDTO[] =[];

this.assigneList = this.data.assigneList;


///..

and model is as follows:

export class BoardAssigneDTO {
    id : Number = 0;
    label : string = '';
    value : string = '';
}

So in this case my onChange should have object in the form BoardAssigneDTO which has id, label, value. How can this be done.

Initially, I was trying to pass just object as id, Name, Country but dropdown wouldnt work. So followed as per documentation primeNG table edit with dropdown and created label and value pair which is concat of name and country.

But my unique key is id and I want to pass this id to the backend. How is this possible? Any suggestions highly appreciated.

However normal dropdown which is not inside p-table works fine. The onChange event for those dropdowns gives the entire object. — Geek, Aug 18 '20 at 04:09

score 1 · Accepted Answer · answered Aug 19 '20 at 17:43

This doesn't work as it is for normal dropdowns if it is inside a p-table.

By default p-dropdown value is mapped to value property in option list object.

I have used the below approach to fix achieved this long time back.

Add the event and pass the value and list:

<p-dropdown [options]="assigneList"  [(ngModel)]="rowData[col.field]" (onChange)="changeAssigne(assigneList,rowData[col.field])" ></p-dropdown>

Find the object and assign to model in changeAssigne method

changeAssigne(list,value){
   // find out the object from list
   let selectedItem = list.filter((item)=>{
     return item.value === value;
   });
   console.log(selectedItem);// selected option object
}

Angular primeNg pEditableColumn dropdown onChange event

1 Answers1