如何以数字格式而不是数组从 ng-multiselect-dropdown 列表中提取数据

Question

我需要通过 post 从 Angular UI 将对象发送到 REST API。 在 Angular UI 中，我正在使用 ng-multiselect-dropdown 组件从多选下拉列表中捕获 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_ARRAY 令牌中反序列化 int 的实例；嵌套异常是 com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot deserialize of int out of START_ARRAY token↵ at [Source: (PushbackInputStream)

我只需要将 item_id 分配给 dealid，并且 dealid 应该以数字而不是数组的形式出现。 我该如何修改我的代码？

我们将不胜感激！

Answer 1

在component.ts中创建一个参数如

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