Angular primeNg pEditableColumn 下拉 onChange 事件

Question

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

<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传递给后端。这怎么可能。非常感谢任何建议。

Answer 1

如果它位于 p-table.

中，则这对于普通下拉菜单不起作用

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

我已经使用以下方法修复了这么长时间。

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

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

Angular primeNg pEditableColumn 下拉 onChange 事件

Angular primeNg pEditableColumn dropdown onChange event

java

angular

primeng

primeng-datatable

primeng-dropdowns