如何在父级下拉框变更时清除@ng-select封装组件的已选中项？

问题原因 #

你当前的写法存在两个核心问题：

1. 封装的app-ec-dropdown组件没有对外部输入的selectedId做变更监听，父组件修改menuGroupId后，组件内部和ng-select绑定的ngModel变量没有同步更新，导致旧选中值依然显示
2. 父组件同时给自定义组件绑定了[selectedId]和[(ngModel)]，两个数据源冲突，优先生效的是组件内部的ngModel值

解决方案1（推荐：修改封装组件逻辑，一劳永逸） #

第一步：调整封装组件的TS逻辑，新增变更监听

在app-ec-dropdown的ts文件中实现OnChanges接口，监听外部输入的selectedId和items变化，同步更新内部绑定的选中值：

import { Component, Input, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-ec-dropdown',
  // 其余原有配置保持不变
})
export class EcDropdownComponent implements OnChanges {
  @Input() items: any[];
  @Input() required = false;
  @Input() selectedId: any;
  @Output() selectedIdChange = new EventEmitter<any>();
  
  // ng-select实际绑定的内部变量
  internalSelectedId: any;

  ngOnChanges(changes: SimpleChanges): void {
    // 外部传入的选中值变化时同步到内部
    if (changes['selectedId']) {
      this.internalSelectedId = this.selectedId;
    }
    // 选项列表清空时自动清除选中值
    if (changes['items'] && this.items?.length === 0) {
      this.internalSelectedId = null;
      this.selectedIdChange.emit(null);
    }
  }

  // 内部选中值变化时同步到父组件
  onSelectChange(val: any) {
    this.selectedIdChange.emit(val);
  }
}

第二步：调整封装组件的模板绑定

把ng-select的ngModel绑定到内部变量，新增选中事件监听：

<ng-select class="custom"
  [items]="items"
  bindLabel="Name"
  bindValue="Id"
  [(ngModel)]="internalSelectedId"
  [required]="required"
  (change)="onSelectChange($event)">
</ng-select>

第三步：调整父组件的调用写法

删除多余的ngModel绑定，直接用自定义组件的双向绑定：

<app-ec-dropdown name="MenuGroupId"
  [items]="menuGroups"
  [(selectedId)]="menuGroupId">
</app-ec-dropdown>

之后你在第一个下拉的change事件中直接赋值this.menuGroupId = null就可以正常清除第二个下拉的选中值了：

onModuleChange() {
  // 先清空选中值
  this.menuGroupId = null;
  // 再清空旧选项、加载新选项
  this.menuGroups = [];
  // 调用接口加载对应moduleId的菜单组数据
  this.loadMenuGroups(this.moduleId);
}

解决方案2（临时方案：无需修改封装组件） #

如果不想调整封装组件的代码，可以给第二个下拉组件加个销毁重建的开关，强制刷新组件清空旧状态：

父组件TS新增控制变量

// 新增控制变量
showMenuGroupDropdown = true;

// 第一个下拉的change事件逻辑
onModuleChange() {
  // 先隐藏组件，触发销毁
  this.showMenuGroupDropdown = false;
  setTimeout(() => {
    // 清空旧数据
    this.menuGroupId = '';
    this.menuGroups = [];
    // 加载新选项
    this.loadMenuGroups(this.moduleId);
    // 重新显示组件，触发重建，旧状态自动清除
    this.showMenuGroupDropdown = true;
  }, 0);
}

父组件模板给第二个下拉加*ngIf控制

<app-ec-dropdown *ngIf="showMenuGroupDropdown"
  name="MenuGroupId"
  [items]="menuGroups"
  [selectedId]="menuGroupId"
  [(ngModel)]="menuGroupId">
</app-ec-dropdown>

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