如何从数字格式而不是数组格式的ng多选下拉列表中提取数据



我需要通过post将对象从angular UI发送到REST API。在Angular UI中,我使用ng multiselect dropload组件从multiselect下拉列表中捕获dealid。我的DealApi类交易对象看起来是这样的:

export class DealApi{
applicationReceived: any;
dealid: number;
expectedReleaseDate: Date;
plannedRatingCommitteeDate: Date;
priority: any;
releaseTimeCriteria: any;
subsequentRating: any;
}

在app.component.html中:

<ng-multiselect-dropdown name="dropdown"
[placeholder]="'Enter Deal Name or Deal ID'"
[settings]="dropdownSettings"
[data]="dropdownList" 
[(ngModel)]="deal.dealid"
(onSelect)="onItemSelect($event)"
(onDeSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" disabled>
</ng-multiselect-dropdown>
</td>

在app.component.ts:中

export class AppComponent implements OnInit {
title = 'angular-app';
name = 'angular-app';
datePickerConfig: Partial<BsDatepickerConfig>;
dropdownList = [];
selectedItems: any;
dropdownSettings:IDropdownSettings;
dealid : number;
PlannedRatingCommitteeDate: Date;
ExpectedReleaseDate: Date;
ReleaseTimeCriteria: any;
SubsequentRating: any;
Priority: any;
ApplicationReceived: any;
deal:DealApi= new DealApi();
constructor(private service:HttpclientService) {}
ngOnInit(){
this.dropdownList = [
{item_id:1, item_text: "Dealname1 (82034890)"},
{item_id:2, item_text: "Dealname2 (82034890)"},
{item_id:3, item_text: "Dealname3 (82034890)"},
{item_id:4, item_text: "Dealname4 (82034890)"}
];
this.selectedItems = [
{item_id: 2, item_text: "Dealname1 (82034890)"},
{item_id: 3, item_text: "Dealname2 (82034890)"}
];
this.dropdownSettings = {
singleSelection: true,
enableCheckAll:true,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: true
};

在Angular UI上,当我点击保存按钮时,它会调用save((方法,该方法调用getdeals(this.deal(,如下所示:

this.service.getdeals(this.deal).subscribe((data:any)=>{alert("Deal added successfully.");});

在httpClient.service.ts中,我在传递交易对象时调用post:

public getdeals(deal: DealApi)
{
const httpOptions = {
headers: new HttpHeaders({
'Content-Type':  'application/json',
'Accept': 'application/json'
})
};
const url = 'http://localhost:8080/deals';
console.log(deal);
return this.http.post(url,deal,httpOptions);
}

输出中:我得到的交易对象为:

{
dealid: [{item_id: 3, item_text: "Dealname3 (82034890)"}]
plannedRatingCommitteeDate: "2020-04-05T04:00:00.000Z"
expectedReleaseDate: "2020-04-19T04:00:00.000Z"
releaseTimeCriteria: "Market open"
subsequentRating: "No"
priority: "High"
applicationReceived: "No"
}

并且它抛出错误:JSON解析错误:无法反序列化START_ARAY令牌外的int实例;嵌套异常为com.fasterxml.jackson.databind.exc.MismatchedInputException:无法从START_ARAY令牌中反序列化int的实例↵在[来源:(PushbackInputStream(

我只需要将item_id分配给dealid,dealid应该是数字而不是数组。我如何修改我的代码?

任何帮助都将不胜感激!

在组件中创建一个参数,如

selected:any;

然后在html中将模型更改为这个

<ng-multiselect-dropdown name="dropdown"
[placeholder]="'Enter Deal Name or Deal ID'"
[settings]="dropdownSettings"
[data]="dropdownList" 
[(ngModel)]="selected"
(onSelect)="onItemSelect($event)"
(onDeSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)" disabled>
</ng-multiselect-dropdown>
</td>

然后在onItemSelect($event)函数中分配您的id

onItemSelect(event){
if(this.selected.length>0){
this.deal.dealid=this.selected[0].id;
}
}
<ng-multiselect-dropdown [(ngModel)]="selected"
[settings]="dropdownSettings"
[data]="dropdownList"
>
<div *ngFor="let item of selected">
<p>{{item.item_text}}</p>
</div>

above div is the confirmation that the code is properly working.If you are able to see that the items are being displayed on screen as you keep selecting or deselecting the options , means the code is working well. Later on you can remove the div .In your component.ts file write below code

selected:any; 
dropdownList:any = [];
dropdownSettings:IDropdownSettings={};
ngOnInit() {
this.dropdownList = [
{ item_id: 1, item_text: 'Item1' },
{ item_id: 2, item_text: 'Item2' },
{ item_id: 3, item_text: 'Item3' },
{ item_id: 4, item_text: 'Item4' },
{ item_id: 5, item_text: 'Item5' }
];
this.dropdownSettings = {
idField: 'item_id',
textField: 'item_text',
};
}

最新更新