How to bind data of multiselect dropdown of primeng Angular

Question

I am using primeng Multiselect dropdown in a form.

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.

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.

      <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

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 . I also removed the duplicate 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 . This would match selections based on roleId instead of using object equality