Angular primeNg pEditableColumn 下拉 onChange 事件答案

【问题标题】：Angular primeNg pEditableColumn dropdown onChange eventAngular primeNg pEditableColumn 下拉 onChange 事件
【发布时间】：2020-12-07 05:30:42
【问题描述】：

我有一个带有 p-editable 列的 p-table，它是一个下拉列表，如下所示：

<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 字段。我的下拉菜单对于每一行都非常有效，并且相应的元素被完美地选中。但是我有一个要求，我必须更新数据库的 onChange of dropDown。我的 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、Name、Country 传递，但下拉菜单不起作用。因此按照文档primeNG table edit with dropdown 并创建了名称和国家/地区连接的标签和值对。但我的唯一键是 id，我想将此 id 传递给后端。这怎么可能。任何建议都非常感谢。

【问题讨论】：

但是不在 p-table 内的正常下拉菜单可以正常工作。这些下拉菜单的 onChange 事件提供了整个对象。

标签： java angular primeng primeng-datatable primeng-dropdowns

【解决方案1】：

如果它在 p-table 内，这对于普通下拉菜单不起作用。

默认情况下，p-dropdown 值映射到选项列表对象中的 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
}

【讨论】：