Angular primeNg pEditableColumn下拉列表on Change事件

Question

我有一个带p可编辑列的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的Change上，我必须更新DB。

我的onChange函数是changeAssigne(事件(，目前只显示值。我希望onChange能给我整个对象。

组件.ts代码

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

///..

模型如下：

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

因此，在这种情况下，我的onChange应该具有BoardAssigneDTO形式的对象，该对象具有id、label和value。这是怎么做到的。

起初，我试图将对象作为id、Name、Country传递，但下拉列表不起作用。因此，按照文档的要求，用下拉菜单编辑prime NG表，并创建标签和值对，即名称和国家的连接。

但我的唯一密钥是id，我想把这个id传给后端。这怎么可能？非常感谢任何建议。

Answer 1

如果它在p表中，则这与正常下拉列表一样不起作用。

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

我用下面的方法修复了这么长时间以前实现的。

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

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