Question

使用primeng创建了多选下拉选项，从多列选择中按预期列出的服务创建的选项值。

必须更新

ngModel，并且必须在多选下拉列表中选择多选。

这是从数据集中得到的响应。

this.users = [{
            "id": 1,
            "name": "Ram",
            "emp_code": "121",
            "dpt_id": 1,
            "skills": [{id:1, rate:1} , {id:2, rate:4}, {id:4, rate:5} ]
          },
          {
            "id": 2,
            "name": "Vijay",
            "emp_code": "1212",
            "dpt_id": 1,
            "skills": [{id:1, rate:1} , {id:2, rate:4}, {id:4, rate:5} ]
          },
          {
            "id": 3,
            "name": "govind",
            "emp_code": "1214",
            "dpt_id": 1,
            "skills": [{id:1, rate:1} , {id:2, rate:4}, {id:4, rate:5} ]
          }]

以下是多选

this.skills = [{
            "id": 1,
            "name": "php",
            "cat_id": [1]
          },
          {
            "id": 2,
            "name": "java",
            "cat_id": [1]
          },
          {
            "id": 3,
            "name": "python",
            "cat_id": [1]
          },
          {
            "id": 4,
            "name": "css3",
            "cat_id": [2]
          }]

创建技能选项格式

this.skill.push({ label: skill.name, value: skill.id });

以下html用于显示多项选择，如何设置来自users.skills变量的ngModel值，因为它具有rate值而且没有循环并创建变量。

<p-multiSelect [options]="skill" [style]="{'width':'100%'}" [(ngModel)]="users.skills"></p-multiSelect>

Answer 1

您应该撤销ngModel，

According to PrimeNg Documentaion [options]应为数组。

此外，选项对象应包含：

export interface SelectItem {
    label?: string;
    value: any;
    styleClass?: string;
    icon?: string;
    title?: string;
}

[options]应该是一系列技能"users.skills"而[(ngModel)]应该是您想要检查的skill，

所以， HTML 应该是

<p-multiSelect [options]="users.skills" [style]="{'width':'100%'}" [(ngModel)]="skill"></p-multiSelect>

ngModel没有循环进行多选

1 个答案: