Angular 6 如何禁用p-dropdown下拉框已选中及同名分组选项

云原生阿岚

2026-9-27

解决方法

你当前问题的核心是直接给整个下拉表单控件设置了disabled属性，才会导致整个下拉框被禁用。PrimeNG的p-dropdown原生支持单个选项禁用，只要给options数组的对应项加上disabled: true属性即可实现需求，具体修改步骤如下：

组件新增变量存储禁用组名
在customer.component.ts的类属性中新增以下变量，用来存储需要禁用的组名称，方便后续快速判断：

// 存储已需要禁用的组名称
disabledGroupNames: Set<string> = new Set();

移除下拉框全局禁用配置
修改initForm方法中下拉控件的初始化代码，删掉之前的全局禁用配置：

initForm() {
    this.customerForm = this.fb.group({
      'customerID': ['', Validators.required],
      'productID': [''],
      'projectID': ['', Validators.required],
      'type': [''],
      allGroup: this.fb.array([]),
      // 修改为仅保留初始值，移除全局disabled配置
      custGrpDropDown :['']
    });
    this.spinner.hide();
}

实现updateFlag方法更新选项禁用状态
你原有逻辑已经调用了updateFlag方法，直接实现该方法即可，遍历所有下拉选项，把组名匹配的项设置为禁用状态：

updateFlag(isDisabled: boolean, groupName: string) {
  const targetGroupName = groupName.trim();
  // 更新禁用组名集合
  if (isDisabled) {
    this.disabledGroupNames.add(targetGroupName);
  } else {
    this.disabledGroupNames.delete(targetGroupName);
  }
  // 重新生成options数组，修改对应项的disabled属性
  // 用解构赋值生成新数组触发Angular变更检测，让视图自动更新
  this.existingGroups = this.existingGroups.map(item => {
    const currentGroupName = item.label.split('-')[1]?.trim();
    return {
      ...item,
      disabled: this.disabledGroupNames.has(currentGroupName)
    };
  });
}