Angular2中如何限制下拉多选框出现重复值

嘿，我来帮你搞定这个重复税名的问题！从你的描述和代码来看，当前下拉框直接遍历原始的taxlist数组，如果里面存在重复的税名条目，就会出现像截图里CGST被选中两次的情况。下面给你两种针对性的实现方案：

方案1：从源数据去重，避免下拉选项重复 #

首先我们可以在组件里处理taxlist，生成一个不含重复税名的列表，这样下拉框里每个税名只会显示一次。

步骤1：在组件TypeScript中添加去重逻辑 #

// 假设这是你的组件类
export class YourTaxComponent {
  taxlist: any[] = []; // 你的原始税列表数据
  model: any = { tax: [] }; // 如果是多选，这里要设为数组哦
  per: string = '';

  // 生成去重后的税列表（使用getter自动更新）
  get uniqueTaxList() {
    const seenTaxNames = new Set<string>();
    return this.taxlist.filter(taxItem => {
      if (!seenTaxNames.has(taxItem.tax_name)) {
        seenTaxNames.add(taxItem.tax_name);
        return true;
      }
      return false;
    });
  }

  // 你的原有方法
  dropdown(value: string) {
    // 你的dropdown逻辑
  }

  addContact(taxValue: string, percentageValue: string) {
    // 添加新税的逻辑，添加后uniqueTaxList会自动更新
  }
}

步骤2：修改HTML模板遍历去重后的列表 #

把原来的*ngFor遍历对象改成uniqueTaxList：

<div class="form-group"> 
  <label for="tax">Tax Name</label> 
  <select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel" multiple> 
    <option value="addNew"> 
      <i class="fa fa-plus" aria-hidden="true"></i>Add New Tax 
    </option> 
    <hr> 
    <br/> 
    <!-- 遍历去重后的列表 -->
    <option *ngFor="let i of uniqueTaxList" [value]="i.tax_name">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option> 
  </select> 
</div> 
<div> 
  <label for="percentage">Tax Percentage</label> 
  <input type="text" class="form-control" id="tax_percentage" placeholder="Percentage" pattern="[0-9]+" minlength="0" maxlength="3" [(ngModel)]="per" name="tax_percentage" #percentage="ngModel"> 
</div> 
<button (click)="addContact(tax.value,percentage.value);" type="button" class="btn btn-success btn-sm text-right"> 
  <i class="fa fa-plus fa-lg"></i> 
</button>

方案2：禁止重复选择已选中的税名（多选场景） #

如果你的需求是已经选中的税名不再出现在下拉框中（或被禁用），可以在渲染选项时判断当前税名是否已被选中：

修改HTML模板（隐藏已选中选项） #

因为*ngFor和*ngIf不能直接放在同一个元素上，我们用<ng-container>来包裹：

<div class="form-group"> 
  <label for="tax">Tax Name</label> 
  <select class="form-control" id="tax_name" (change)=" dropdown(tax.value)" [(ngModel)]="model.tax" name="tax_name" #tax="ngModel" multiple> 
    <option value="addNew"> 
      <i class="fa fa-plus" aria-hidden="true"></i>Add New Tax 
    </option> 
    <hr> 
    <br/> 
    <ng-container *ngFor="let i of uniqueTaxList">
      <!-- 只显示未被选中的税名 -->
      <option [value]="i.tax_name" *ngIf="!model.tax.includes(i.tax_name)">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>
    </ng-container>
  </select> 
</div>

可选：禁用已选中选项（替代隐藏） #

如果你不想隐藏，而是禁用已选中的选项，把*ngIf换成[disabled]即可：

<ng-container *ngFor="let i of uniqueTaxList">
  <option [value]="i.tax_name" [disabled]="model.tax.includes(i.tax_name)">{{i.tax_name}} &nbsp; ( {{i.tax_percentage}}% )</option>
</ng-container>

这样就能彻底避免重复选择同一个税名的问题啦！

内容的提问来源于stack exchange，提问作者Hariprasath