如何禁用p-dropdown中ng-template自定义的已选语言下拉项

PrimeNG p-dropdown 组件不会识别自定义item模板上挂载的原生disabled属性，选项禁用逻辑需要通过组件官方提供的optionDisabled配置项实现。你之前尝试的ng-disable是AngularJS（1.x版本）的语法，在Angular 2+环境下本身无法生效。

具体实现步骤 #

• 为下拉组件添加optionDisabled配置
  该属性支持两种传值：

  • 传字符串：指定options数组中代表禁用状态的字段名
  • 传函数：接收当前选项对象作为参数，返回布尔值判断是否禁用

  修改后的模板代码如下：

  <p-dropdown 
    [styleClass]="'form-control'" 
    [options]="languages" 
    optionValue="languageID" 
    formControlName="languageID" 
    appendTo="body"
    [optionDisabled]="checkIfLanguageDisabled"
    (onChange)="onLanguageChanged(languagesFormGroup, $event.value)">
      <ng-template let-item pTemplate="selectedItem">
        <img src="{{item.icon}}"><span>{{item.name}} {{item.languageID}}</span>
      </ng-template>
      <ng-template let-item pTemplate="item">
        <img src="{{item.icon}}"><span>{{item.name}} {{item.languageID}}</span>
      </ng-template>
  </p-dropdown>
  

• 在组件类中编写禁用判断逻辑
  按照「已被选中的语言不可再次选择」的需求编写判断函数即可，示例：

  // 替换为项目中实际存储已选语言ID的数据源
  selectedLanguageIDs: Array<string | number> = [];
  
  checkIfLanguageDisabled = (languageItem: any): boolean => {
    // 当前语言ID已存在于已选列表中时，返回true禁用该选项
    return this.selectedLanguageIDs.includes(languageItem.languageID);
  }
  

  如果使用v10以前的旧版PrimeNG，不支持给optionDisabled传函数，可以在每次选中语言变化后遍历languages数组，给已选中的选项添加disabled: true属性，再将模板上的[optionDisabled]改为optionDisabled="disabled"即可。

• （可选）自定义禁用项样式
  组件会自动给禁用的选项添加p-disabled类名，可以根据需求覆盖默认样式：

  .p-dropdown-item.p-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  

注意事项 #

不要在pTemplate="item"的自定义模板内容上直接绑定disabled属性，组件渲染选项列表时只会读取optionDisabled对应的规则做事件拦截和状态标记，模板内部加的属性不会作用到外层可点击的选项容器上，不会产生禁用效果。

内容的提问来源于stack exchange，提问作者Katia S.