Angular4中如何删除、禁用或隐藏下拉选单的重复选项？

嘿，我来帮你搞定这个下拉菜单重复选项的问题！首先得说，你尝试用jQuery操作DOM的方式其实不太符合Angular的设计思路——Angular是数据驱动的，咱们应该从数据源入手解决问题，而不是直接去改DOM元素。而且你之前的jQuery代码里还有个小坑：在each回调里的this指向的是当前的<option>DOM节点，不是你的组件实例，所以this.seen根本取不到你定义的seen对象，这也是你的方法没生效的原因之一。

下面给你几种靠谱的解决方案，按推荐程度排序：

1. 从数据源直接去重（最推荐） #

既然问题出在rolesList里有重复的ROLE_CD，那咱们在获取数据后直接把重复项过滤掉就好了，这样模板里循环的时候自然就没有重复选项了。

修改你的getRolesList方法，在订阅响应的时候处理数据：

getRolesList() {
  const url = `${config.url}:${config.port}/your-api-path`; // 补全你的API地址
  this.http.post(url)
    .map(result => result.json())
    .subscribe((res: any[]) => {
      // 方法1：用filter + findIndex去重
      this.rolesList = res.filter((role, index, self) => 
        index === self.findIndex(r => r.ROLE_CD === role.ROLE_CD)
      );

      // 方法2：用Set去重（更简洁）
      // const uniqueRoleCds = new Set();
      // this.rolesList = res.filter(role => {
      //   if (!uniqueRoleCds.has(role.ROLE_CD)) {
      //     uniqueRoleCds.add(role.ROLE_CD);
      //     return true;
      //   }
      //   return false;
      // });
    });
}

2. 调整模板，避免额外的重复选项 #

看你的模板代码，你多加了一个<option>{{updateMappingUserRole}}</option>，这会导致当updateMappingUserRole的值和rolesList里的某个ROLE_CD重复时，出现额外的重复项。咱们把这个改成默认的占位选项就好：

<div class="col-md-6">
  <div class="form-group">
    <label for="role"> Role: </label>
    <select class="form-control" 
            name="updateMappingUserRole" 
            [formControl]="updateMappingRoleForm.controls['updateMappingUserRole']" 
            [(ngModel)]="updateMappingUserRole" 
            (change)="getRoleID(updateMappingUserRole)" 
            id="role">
      <!-- 改成默认占位选项，避免重复 -->
      <option value="">请选择角色</option>
      <!-- 给option绑定value，确保ngModel能正确获取选中值 -->
      <option *ngFor="let i of rolesList" [value]="i.ROLE_CD">
        {{i.ROLE_CD}}
      </option>
    </select>
  </div>
</div>

3. 用自定义管道过滤重复项（适合需要保留原始数据源的场景） #

如果你因为某些原因不能修改原始的rolesList，可以自定义一个管道来过滤重复选项：

步骤1：创建去重管道 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'uniqueRoleCd' })
export class UniqueRoleCdPipe implements PipeTransform {
  transform(roles: any[]): any[] {
    if (!roles || roles.length === 0) return [];
    const uniqueRoleCds = new Set();
    return roles.filter(role => {
      if (!uniqueRoleCds.has(role.ROLE_CD)) {
        uniqueRoleCds.add(role.ROLE_CD);
        return true;
      }
      return false;
    });
  }
}

步骤2：在模块中声明管道 #

在你的AssignModule里添加这个管道的声明：

import { UniqueRoleCdPipe } from './unique-role-cd.pipe';

@NgModule({
  declarations: [
    AssignComponent,
    UniqueRoleCdPipe // 声明管道
  ]
})
export class AssignModule {}

步骤3：在模板中使用管道 #

<option *ngFor="let i of rolesList | uniqueRoleCd" [value]="i.ROLE_CD">
  {{i.ROLE_CD}}
</option>

4. 禁用重复选项（如果需要保留但不允许选择） #

如果你不想删除重复项，只是想禁用它们，可以在模板里添加禁用判断：

<option *ngFor="let i of rolesList" 
        [value]="i.ROLE_CD"
        [disabled]="isRoleDuplicate(i.ROLE_CD)">
  {{i.ROLE_CD}}
</option>

然后在组件里添加判断方法：

isRoleDuplicate(roleCd: string): boolean {
  return this.rolesList.filter(r => r.ROLE_CD === roleCd).length > 1;
}

不过这种方法还是不如从数据源去重彻底，毕竟重复数据留在列表里也没啥意义~

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