p-pickList

[esoftware-github]

I am using the component

<p-pickList
        [source]="roleList"
        [target]="assignedRolesList"
        sourceHeader="Available"
        targetHeader="Selected"
        [dragdrop]="true"
        [responsive]="true"
        [sourceStyle]="{ height: '20rem' }"
        [targetStyle]="{ height: '20rem' }"
        breakpoint="1400px"
        [showSourceControls]="false"
        [showTargetControls]="false"
      >
        <ng-template let-role pTemplate="item">
          {{ role.RoleName }}
        </ng-template>
      </p-pickList>

When the page loads everything is fine

once the data is saved in the database and retrieved for editing, we populate the [target]="assignedRolesList" variable but the [source]="roleList" is not updated

const entity = await firstValueFrom(this.profileService.onGetById(parseInt(param)));
      // Agregar cada elemento de ProfileItems como un FormGroup al FormArray RoleList
      entity.ProfileItems.forEach((item: any) => {
        this.ProfileItemList.push(this.fb.group({
          ProfileItemID: item.ProfileItemID,
          ProfileID: item.ProfileID,
          ManageRoleID: item.ManageRoleID
        }));
      });


      this.assignedRolesList = entity.AssignedRolesList;

thank you so much

[cetincakiroglu]

Hi,

Could you please create a stackblitz example so we can identify the issue precisely? It's related to change detection but we need an example to try possible workarounds without diving into the source code.

[cetincakiroglu]

Maybe this would help, created an example with to simulate request-response https://stackblitz.com/edit/fnkj9d?file=src%2Fapp%2Fdemo%2Fpicklist-filter-demo.ts,src%2Fapp%2Fdemo%2Fpicklist-filter-demo.html

[esoftware-github]

In the example, as you will see, the data has already been assigned to the target but the source remains the same, that is, the first 2 items in the source are already assigned to the target but they continue to be displayed in the source.

https://stackblitz.com/edit/fnkj9d-n3qsvk?file=src%2Fapp%2Fdemo%2Fpicklist-filter-demo.ts

[cetincakiroglu]

Hi,

The problem is change detection, you're copying the array and you need to modify it to trigger change detection or you can manually trigger change detection. See the example below

https://stackblitz.com/edit/fnkj9d-xbdeu1?file=src%2Fapp%2Fdemo%2Fpicklist-filter-demo.ts

[esoftware-github]

It is understood, in the case that in the loadData, there is the initial data with which the source will always be loaded and the idea is that when bringing the data from the database and assigning it to the target, the source must update with the differences with the target

The solution I gave is this

this.roleList = this.roleList.filter(item1 => !this.assignedRolesList.some(item2 => item2.ManageRoleID === item1.ManageRoleID));

roleList = source
assignedRolesList = from database

[cetincakiroglu]

Filter also creates a new array, the problem in your issue is you are not changing an array or creating a new one, you're copying the array that's why it doesn't detect the changes because there isn't a manipulation occurs. Filter or spread operator, you can use a lot of things to trigger change detection.