Angular中重新打开模态框时ng-select出现重复值问题

问题重现 #

• 数据库存了3个州：Florida、Texas、Montana
• 点击「Create Template」按钮打开右侧面板，面板组件的ngOnInit方法里通过locationService从后端拿州列表，排序后在数组头部加{ code: 'ALL', name: 'All' }选项，用ng-select展示
• 首次打开面板显示正常：All、Florida、Montana、Texas
• 不刷新页面，关闭再打开面板，「All」会重复出现（第二次打开显示2个All，第三次3个）
• 试过在ngOnInit开头清空this.states数组但没用，调试发现每次打开时this.states初始是空的，还是会重复

核心原因 #

问题根源在数据处理逻辑或服务返回的数组引用：

1. 如果locationService内部缓存了数组，每次返回的是同一个数组引用，那你第一次在头部加「All」后，这个缓存数组就已经包含「All」了，下次请求时拿到的数组自带「All」，再添加就会重复。
2. 另一种可能是处理数据时没克隆数组，直接修改了服务返回的原数组，导致后续请求拿到的是被修改过的数组。

解决方法 #

方法1：克隆服务返回的数组，避免修改原引用 #

处理后端数据时先创建新数组，确保每次都基于干净的后端数据操作：

ngOnInit() {
  this.locationService.getStates().subscribe(states => {
    // 克隆后端返回的数组，防止修改原引用
    const clonedStates = [...states]; 
    // 按名称排序
    clonedStates.sort((a, b) => a.name.localeCompare(b.name));
    // 拼接All选项和处理后的州数组
    this.states = [{ code: 'ALL', name: 'All' }, ...clonedStates];
  });
}

方法2：添加All前先过滤已存在的All选项 #

如果没法保证服务返回的是干净数据，可以先过滤掉可能存在的All选项：

ngOnInit() {
  this.locationService.getStates().subscribe(states => {
    // 过滤掉已有的All选项
    const filteredStates = states.filter(state => state.code !== 'ALL');
    filteredStates.sort((a, b) => a.name.localeCompare(b.name));
    this.states = [{ code: 'ALL', name: 'All' }, ...filteredStates];
  });
}

方法3：调整组件生命周期逻辑，确保每次打开都重新加载数据 #

如果组件关闭时没被销毁（比如用*ngIf隐藏而非销毁），ngOnInit只会执行一次，这时候要把数据加载逻辑移到监听面板打开的回调里：

// 假设面板通过isOpen输入属性控制显示
@Input() isOpen: boolean;

ngOnChanges(changes: SimpleChanges) {
  // 当面板打开时重新加载数据
  if (changes.isOpen && changes.isOpen.currentValue) {
    this.loadStates();
  }
}

private loadStates() {
  this.locationService.getStates().subscribe(states => {
    const clonedStates = [...states].sort((a, b) => a.name.localeCompare(b.name));
    this.states = [{ code: 'ALL', name: 'All' }, ...clonedStates];
  });
}

验证步骤 #

• 调试时打印locationService.getStates()返回的数组，确认每次返回的都是不含「All」的原始数据
• 在组件的ngOnDestroy方法里加日志，检查面板关闭时组件是否被销毁，确保每次打开都会重新初始化

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