ngModel 没有循环多选答案

【问题标题】：ngModel without looping for multiselectngModel 没有循环多选
【发布时间】：2018-04-16 10:16:51
【问题描述】：

使用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>

【问题讨论】：

你试过 users.skills.id 吗？？
TypeError: 无法读取未定义的属性“id”

标签： angular angular-ngmodel

【解决方案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>

【讨论】：

选项应该有字段标签和字段键，尝试让下拉为空。
尝试将id 和name 转换为value 和label
你也有 optionLabel 属性，trt 这个[optionLabel] = "name"
标签有效，但选择不工作尝试 [dataKey]="id"
也改了，this.skill.push({ name: skill.name, id: skill.id });