In an Angular App I am trying to create selection lists (or maybe dropdowns) which shall all have the same source list. When an item is selected in any of the dropdowns, it should not be available anymore in the source list. So when any of the other dropdowns is opened, this item should not be available for selection anymore.

I have tried so solve this with primeng multiselects and also with simple select and option tags. But every time the problem seems to be the manipulating of the source list. When I remove the item from the source list, the select tag seems kind of to lose the source list and there are no options at all.

I think, what I'm getting wrong, is the filtering ... Here is the code:

<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
    }
})

}

Got it figured out at least with the filtering. This way it works:

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