如何绑定primeng Angular的多选下拉列表的数据

如何解决如何绑定primeng Angular的多选下拉列表的数据

我在表单中使用了primeng Multiselect 下拉菜单。

在单击编辑按钮时，我想在所有字段中显示现有数据。对于输入文本，它在我使用 [(ngModel)] 时显示，我也为多选下拉菜单尝试了相同的方法，但它不起作用。

所以我无法绑定多选下拉列表的值。我曾尝试使用 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>

解决方法

使用您当前的代码，您正在为资源/用户的每个角色创建一个多选。我认为这不是您想要的，否则您可能只会使用普通下拉菜单。

所以如果你真的只想要一个多选，你可以这样做：

  <p-multiSelect
    [options]="resourceRoles"
    optionLabel="name"
    placeholder="Select"
    name="roles"
    id="roles"
    [(ngModel)]="resource.roles"
    required
    appendTo="body"
  >
  </p-multiSelect>

我不确定管道在做什么，如果您使用 optionLabel，您可能不需要它。我还删除了重复的 ngModel。

如果 dataKey="roleId" 中的对象与 resource.roles 中的对象不同，您可能还想尝试使用 resourceRoles。这将匹配基于 roleId 而不是使用对象相等性的选择