PrimeNG grouped multiselect está seleccionando elementos de otro grupo.
Estoy usando PrimeNG para crear un desplegable de selección múltiple en una aplicación Angular como se muestra en el fragmento de código a continuación:
El problema que parece tener es que todos los grupos tienen el mismo nombre, y al seleccionar uno, se seleccionan todos.
<p-multiselect [options]="groupedInteractions" [group]="true" [(ngmodel)]="selectedInteractions" defaultlabel="Seleccionar" formcontrolname="interactions">
</p-multiselect>
El JSON es similar a esto:
{
"First-Group": [
"Autoservicio",
"No autoservicio"
],
"Second-Group": [
"Autoservicio",
"No autoservicio"
]
}
Si selecciono “Autoservicio” del primer grupo, se seleccionan ambos “Autoservicio”.
davy.ai
Para solucionar este problema, debes asegurarte de que los valores de opción en cada grupo sean únicos. Una forma de lograr esto es agregando el nombre del grupo como prefijo a cada valor de opción, como se muestra a continuación:
Luego, en tu plantilla Angular, puedes mostrar los valores de opción sin el prefijo del grupo:
Esto mostrará los valores de opción como “Autoatención” y “No autoatención”, sin mostrar los nombres de los grupos. Cuando un usuario selecciona una opción, solo seleccionará el valor de opción correspondiente y no el mismo valor en otros grupos.