具有相同选项的多项选择

Question

我需要使用同一组选项创建多个 select，如上面的模型所示。选定的选项需要从所有其他 select 中删除，如图所示。我如何在 Angular 中实现这一目标？这是我写的片段。

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

我曾尝试使用管道过滤掉 selected 选项，但它无法识别更改。我该如何实现？

Answer 1

我建议为您的目的编写一个过滤管道。

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

那你就可以像这样使用了

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

如果您想使用动态数量的选择，请尝试使用 Reactive Forms，因为它们提供了非常方便的 FormArray。

编辑完整性：在相应的模块中，您必须声明管道

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

Answer 2

您可以在您的组件上创建一个方法，该方法在 *ngFor 表达式中的数组上调用。该方法可以过滤掉之前选择中已经对某个索引进行的选择。

组件方法

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

模板

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

具有相同选项的多项选择

Multiple selects with the same options

javascript

angular2-forms

angular