Angular primeNg pEditableColumn下拉菜单onChange事件

huangapple go评论79阅读模式
英文:

Angular primeNg pEditableColumn dropdown onChange event

问题

以下是您要翻译的内容:

我有一个带有可编辑列的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事件中,我必须更新数据库。

我的onChange函数是changeAssigne(event),目前只显示值。我希望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等对象,但下拉菜单无法工作。因此,我按照文档的建议[primeNG table edit with dropdown][1]创建了标签和值对,它是名称和国家的组合。

但是我的唯一键是id,我想将这个id传递给后端。这是否可能?非常感谢任何建议。

  [1]: https://www.primefaces.org/primeng/showcase/#/table/edit

请注意,由于您要求只翻译代码部分,因此我没有对代码进行翻译,只对注释和文本进行了翻译。

英文:

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.

答案1

得分: 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){
   // 从列表中找出对象
   let selectedItem = list.filter((item)=>{
     return item.value === value;
   });
   console.log(selectedItem);// 选定的选项对象
}
英文:

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
}

huangapple
  • 本文由 发表于 2020年8月18日 12:02:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/63461693.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定