Angular Prime pEditableColumn下拉onChange事件

问题描述

我有一个带有p-editable列的p表，其下拉列表如下：

<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>

根据primeNg文档，assigneList有一个标签，值我还有一个ID字段，该字段对于每一行都是唯一的。 对于每个行，我的下拉列表都可以正常工作，并且可以完美地选择相应的元素。但是我有一个要求dropDown的onChange我必须更新数据库。 我的onChange函数是changeAssigne（event），当前仅显示值。我希望onChange可以给我整个对象。

Component.ts代码

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

this.assigneList = this.data.assigneList;


///..

和模型如下：

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

因此，在这种情况下，我的onChange应该具有BoardAssigneDTO形式的对象，该对象具有ID，标签，值。如何才能做到这一点。 最初，我试图将对象仅作为ID，名称，国家/地区传递，但下拉菜单无法正常工作。因此，按照文档primeNG table edit with dropdown 进行操作，并创建了名称和国家/地区对的标签和值对。但是我唯一的密钥是id，我想将此ID传递给后端。这怎么可能。任何建议高度赞赏。

解决方法

如果它位于 p表之内，则无法正常进行下拉菜单。

默认情况下，p下拉值映射到选项列表对象中的value属性。

我已经使用以下方法修复了很长一段时间以来取得的成就。

添加事件并传递值和列表：

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

使用changeAssigne方法查找对象并分配给模型

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