Angular2 component p-multiSelect Primeng

Question

In template user.component.html i use component of Primeng

<p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="user.roles"></p-multiSelect>

When load the input data, how show selected values

This code in user.component.ts

export class UserComponent implements OnInit {

  private selectedStores: string[];
    
  constructor(private roleService: RoleService){
       
  this.roleService.getRoleList().subscribe(response =>
    {this.user.roles=response.body.data.map(function(value){
      return {label:value.name, value: value.id};
    })
  })

    this.selectedRoles=['1','2'];
  }

  ngOnInit() {
    this.user={
      roles: [],
    };
  }
}

But in interface multiselect show null,null , if i click multiselect the two items selected. How to show label instead null,null ?

Answer 1

If you upgrade a primeng to version ^4.0.0 it will be work

Answer 2

Did you try to display the resulting user.roles in a console.log, for example?

If the labels show up as null, something is wrong with the options object. It has to be an array of objects key/values, so that you can iterate through it and display in the component. This is one example I have in a project I'm working on:

columns = [
  { value: 'id',         label: 'ID' },
  { value: 'comment',    label: 'Comments' },
  { value: 'updated_at', label: 'Last Update' },
  { value: 'enabled',    label: 'Enabled' }
];

And apparently you're assigning an empty array to your user object, which may override the previous definition in the constructor. The constructor runs before ngOnInit. You can initialize user.roles as empty and assign data to it in ngOnInit().

Hope it helps.

Answer 3

Funny enough, through your problem I found my solution. My issue was to create a data-table and when a row is selected to display the already assigned roles of a user. So i'll break it down for you. Hope it helps you to figure out yours.

1. My staff Model

export interface IStaff {
    staffId: number; 
    userRoles: string[];
}

2. Selecting the roles

export class UserComponent implements OnInit {

    staff: IStaff;
    staffRoles: SelectItem[];
    selectedRoles: string[] = [];
    tempRoles: string[] = [];
    
    constructor(private roleService: RoleService){}
    
    ngOnInit() {

        this.roleService.getRoleList().subscribe(response=> {
            let tempRoles: IStaff[];
            this.staffRoles = [];

            tempRoles = response;

            tempRoles.foreach(el => {
                this.staffRoles.push({
                    label: el.name, value: el.id
                });
            });
        });
               
        staff.userRoles.forEach(el => {
            let value: any = el;
            this.tempRoles.push(value.roleName);
            this.selectedRoles = this.tempRoles;         
        });

        // then set the tempRoles back to null to prevent readding the existing roles
        this.tempRoles = [];
    }
}

3. This should then work

<p-multiSelect name="roles_id" [(ngModel)]="selectedRoles" [options]="staffRoles"></p-multiSelect>