反应形式的Angular PrimeNG Multiselect-在编辑操作期间从后端映射所选数据

问题描述

我正在为Prime项目使用PrimeNg库。编辑某些内容时，从后端映射所选数据时出现问题。所选数据不会错误显示。以下是我的代码。请帮忙。

调用我的对话框并将数据发送到对话框-

 async onEditContact(message: string) {
    let res=await this.getContactById(48);
    const dialogRef = this.dialog.open(ContactFormComponent,{
      disableClose: true,width: '800px'
    });
    let instance = dialogRef.componentInstance;
    instance.ContactForm=this.ContactForm;
    instance.groupList=this.dataSourceGroups;
    instance.response=res;
    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
  

async getContactById(ContactId:number){
    const sendobj:getContactById={
      AccountId:this.globals.AccountId,ContactId:ContactId
    };
      let response=await this.contactGroupService.getContactById(JSON.stringify(sendobj));
      return response;
  }

在对话框中映射数据-

onEdit()
  {
    this.ContactForm.patchValue({
      FirstName:this.response["FirstName"],LastName:this.response["LastName"],VoicePhoneNumber:this.response["SMSPhone"],SMSPhoneNumber:this.response["VoicePhone"],Email:this.response["Email"],groups:JSON.parse(this.response["Groups"])
    });
   
  }

Json可以很好地填充multiselect-

选定数据的杰森-

多选控件-

<div style="width: 100%;">
                <label for="groups">Contact Groups to Launch Campaign to (Optional)</label>
                <p-multiSelect [style]="{'width':'100%'}" [maxSelectedLabels]="6" [options]="groupList" optionLabel="GroupName" formControlName="groups" defaultLabel="Click here to select contact groups">          
                </p-multiSelect>          
            </div>

用于绑定多选的接口-

export interface groupResponse {
    GroupId: number;
    GroupName: string;
    AccountID: number;
    ContactsCount:number;
    CreatedDate:string;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）