En una aplicación angular, estoy tratando de crear listas de selección (o tal vez menús desplegables) que tendrán la misma lista de origen. Cuando se selecciona un elemento en cualquiera de los menús desplegables, ya no debería estar disponible en la lista de origen. Entonces, cuando se abre cualquiera de los otros menús desplegables, este elemento ya no debería estar disponible para su selección.

He intentado resolver esto con primeng multiselects y también con etiquetas de selección y opción simples. Pero cada vez que el problema parece ser la manipulación de la lista de fuentes. Cuando elimino el elemento de la lista de fuentes, la etiqueta de selección parece perder la lista de fuentes y no hay ninguna opción.

Creo que, en lo que me estoy equivocando, es en el filtrado... Aquí está el código:

 <table id="clusters"> <tr *ngFor="let cluster of someService.clustersList; let i = index"> <input type="text" [value]="cluster.desc"> <p-multiSelect [options]="someService.sourceList" [(ngModel)]="cluster.items" (onChange)="editClusterGroups($event, i)" defaultLabel="Select groups" optionLabel="desc"> </p-multiSelect> </tr>

 public editClusterGroups(event, i) { this.someService.sourceList = this.someService.sourceList.filter((el) => { if (this.someService.clustersList[i].items.some((item) => item.code !== el.code)) { return true } })

}

Lo descubrí al menos con el filtrado. De esta manera funciona:

 public editClusterGroups(event) { this.someService.sourceList = this.someService.sourceList.filter((el) => el.code !== event.itemValue.code) }