[英]How to bind data of multiselect dropdown of primeng Angular
I am using primeng Multiselect dropdown in a form.我在表单中使用primeng Multiselect 下拉菜单。
While clicking on the edit button I want to display the existed data in all the field.单击编辑按钮时,我想在所有字段中显示现有数据。 for Input text it is displaying as I am using [(ngModel)] and I have tried the same for Multiselect dropdown as well but it is not working.
对于输入文本,它在我使用 [(ngModel)] 时显示,我也对多选下拉菜单进行了同样的尝试,但它不起作用。
so I am unable to bind the values of multiselect dropdown.所以我无法绑定多选下拉列表的值。 I have tried using the for Loop but the values are not coming in the field.
我尝试使用 for 循环,但值没有出现在字段中。
<div *ngFor ="let role of resource.roles;">
{{role.name}}
<p-multiSelect
[options]="resourceRoles | dropdownToValuePipe"
placeholder="Select"
name = "roles"
id="roles"
[(ngModel)]="role.name"
ngModel
required
appendTo="body"
>
</p-multiSelect>
</div>
With your current code, you are creating one multiselect per role the resource/user has.使用您当前的代码,您正在为资源/用户拥有的每个角色创建一个多选。 I assume this is not what you want, otherwise you would probably just use a normal dropdown.
我认为这不是您想要的,否则您可能只会使用普通的下拉菜单。
So if you really want only one multiselect, you would do something like this:所以如果你真的只想要一个多选,你会做这样的事情:
<p-multiSelect
[options]="resourceRoles"
optionLabel="name"
placeholder="Select"
name="roles"
id="roles"
[(ngModel)]="resource.roles"
required
appendTo="body"
>
</p-multiSelect>
I wasn't sure what the pipe was doing, you might not need it if you use optionLabel
.我不确定 pipe 在做什么,如果您使用
optionLabel
可能不需要它。 I also removed the duplicate ngModel
.我还删除了重复的
ngModel
。
You might want to also play around with using dataKey="roleId"
if the objects in resource.roles
are not the same objects as in resourceRoles
.如果
resourceRoles
中的对象与resource.roles
中的对象不同,您可能还想尝试使用dataKey="roleId"
。 This would match selections based on roleId
instead of using object equality这将匹配基于
roleId
而不是使用 object 相等性的选择
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.