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

Question

我在表单中使用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>

Answer 1

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

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

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

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

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