es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

PrimeNG grouped multiselect está seleccionando elementos de otro grupo.

11 Jul, 2023 Programación

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”.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    {
  "Grupo-Primero": [
    "Autoatención-Primero",
    "No autoatención-Primero"
  ],
  "Grupo-Segundo": [
    "Autoatención-Segundo",
    "No autoatención-Segundo"
  ]
}

    Luego, en tu plantilla Angular, puedes mostrar los valores de opción sin el prefijo del grupo:

    <p-multiselect [options]="interaccionesAgrupadas" [group]="true" [(ngmodel)]="interaccionesSeleccionadas" defaultlabel="Seleccione" formcontrolname="interacciones">
  <ng-template let-option="" ptemplate="item">
    {{ option.value.split('-')[1] }}
  </ng-template>
</p-multiselect>

    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.

Comments are closed.