PrimeNG listbox selecting all instead of one at time

user_4735688 0
Viewed 3913

I am using angular 4 and prime ng 4.3.0 to display an object; however when i select an item the whole lists select instead of just one row at a time.. is something wrong with how i defined the element? 

 <p-listbox formControlName="userRole" [options]="this.userRoleItems"   [(ngModel)]="selectedUserRoles" multiple="multiple" [style]='{"width":"650px"}'  checkbox="checkbox" filter="filter"
               >
               <ng-template let-userRole let-i="index" pTemplate="item" optionLabel="userRole.description">
                  {{userRole.code}}  <span style="float:right">{{userRole.description}}</span>

              </ng-template>
              </p-listbox>

It is doing this: enter image description here

export class UserRole {
    public id: number;
    public name: string;
    public code: string
    public description: string;
    public branchId: number;
    public branchName: string;
}
primeng angular typescript
1 Answers

You should use a value property in your object. There are no optionValue attribute for the moment in the component.

Sample code:

import { Component, OnInit } from '@angular/core';
export class UserRole {
      value: number;
      rolename: string;
  }
@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent implements OnInit {
  userRoleItems: UserRole[] = [{value: 2, description: 'test'},
  {value: 3, description: 'test'},
  ]; 

  selectedUserRoles:any[] = [];


   ngOnInit() {

   }
}

http://plnkr.co/edit/yRVlQgDKz9tSQgiY65lH?p=preview

user_44978400
Related