Having more than one Picklist on the same page

[gilmour22]

Hello All!,

I have a component where i use the accordion tab and a picklist in each tab. I got to populate the source list an evenrything goes smooth until i try to pick something and pass it to the target. At that moment gives me an error.

This is the comoponen html:

Code: Select all

    <p-accordion>
        <p-accordionTab *ngFor="let item of DifferentSystems; index as i;" header="{{item.System}}">
            <p-pickList [source]="rightsByIndex[i]" [target]="rightsSelected" sourceHeader="Available Rights"
                targetHeader="Selected Rights" [responsive]="true" dragdrop="false" filterBy="RightName"
                sourceFilterPlaceholder="Search by Right Name" targetFilterPlaceholder="Search by Right Name"
                [trackBy]="index" [sourceTrackBy]="IDPermission" [targetTrackBy]="IDPermission"
                [showSourceControls]="false" [showTargetControls]="false">
                <ng-template let-right pTemplate="item">
                    <div class="ui-helper-clearfix">
                        <div style="float:left;">
                            <div style="font-size:14px; font-weight:bold; margin:2px; clear:both;">
                                {{right.RightName}}
                            </div>
                            <div style="font-size:11px; font-style: italic; margin:2px; clear:both; background-color:red; color:white;" *ngIf="right.isPrivileged =='Y'">
                                This is a privileged right
                            </div>
                            <div style="font-size:11px; font-style: italic; margin:2px; clear:both;" *ngIf="right.isPrivileged =='N'">
                                Not a privileged right
                            </div>
                        </div>
                    </div>
                </ng-template>
            </p-pickList>
        </p-accordionTab>
    </p-accordion>

in the ts i have the variables properly defined

Code: Select all

  rightsByIndex:any[]=[];
  rightsSelected: SelectItem[];

  DifferentSystems: any[] = [];

  IDProfile:number=0;

  ProfileInfo: any = {};

And this is finally the error when i try to move something to the right:

Code: Select all

ERROR TypeError: Cannot read property 'push' of undefined
    at PickList.push../node_modules/primeng/components/picklist/picklist.js.PickList.moveRight (picklist.js:243)
    at Object.eval [as handleEvent] (PickList.html:39)
    at handleEvent (core.js:34789)
    at callWithDebugContext (core.js:36407)
    at Object.debugHandleEvent [as handleEvent] (core.js:36043)
    at dispatchEvent (core.js:22533)
    at core.js:33721
    at HTMLButtonElement.<anonymous> (platform-browser.js:1789)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30885)

Anyone have any idea on what am i doing wrong?, anyone used different picklists in the same component?

Thank you all !