具有相同选项的多项选择

Question

I need to create multiple select with the same set of options, as illustrated in the mockup above. Selected options need to be removed from all the other selects, as shown in the picture. How do I achieve this in Angular? Here is a snippet of what I have written.

<div class="card-deck mb-3 text-center">
  <div *ngFor="let index of [0, 1, 2, 3]" class="card mb-4">
    <div class="card-header">
      Destination {{ index + 1 }}
    </div>
    <div class="card-body">
      <div class="input-group mb-3">
        <select class="form-control" [(ngModel)]="selectedPlanets[index]">
          <option *ngFor="let planet of planets" [value]="planet.name">
            {{planet.name}}
          </option>
        </select>
      </div>
    </div>
  </div>
</div>

I have tried using a pipe to filter out the selected options, but it does not recognize changes. How do I achieve this?

Answer 1

You can make a method on your component that is called on the array in the *ngFor expression. This method can filter out selections that have already been made in previous choices to a certain index.

Component method

filterChoices(choices: [], selections: [], maxIndex) {
  const inBoundsSelections = selections.filter((x, i) => i <= maxIndex);
  return choices.filter(x => inBoundsSelections.indexOf(x) === -1);
}

Template

<option 
   *ngFor="let planet of filterChoices(planets, selectedPlanets, index - 1)"
   [value]="planet.name">
  {{planet.name}}
</option>

Answer 2

I suggest to write a filtering pipe for your purpose.

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'remove'})
export class RemovePipe implements PipeTransform {
  transform(options: string[], toRemove: string[]): string[] {
    return options.filter(option => !toRemove.includes(option));
  }
}

Then you can use it like

<select #name1>
  <option [value]="planet.name" *ngFor="let planet of planets"></option>
</select>
<select #name2>
  <option [value]="planet.name" *ngFor="let planet of planets | remove:[name1.value]"></option>
</select>
<select #name3>
  <option [value]="planet.name" *ngFor="let planet of planets | remove:[name1.value, name2.value]"></option>
</select>

If you want to use a dynamic number of selects, try using Reactive Forms as they provide the very handy FormArray.

Edit for completeness: In the corresponding module you have to declare the pipe

import { RemovePipe } from 'pathto/remove.pipe'
@NgModule({
  declarations: [ RemovePipe ]
})