使用ng-template循环时如何禁用p-dropdown的选项？

核心修正与实现步骤 #

1. 使用组件原生禁用属性
   PrimeNG的p-dropdown自带optionDisabled输入属性，无需手动用pointer-events-none拦截交互，直接绑定选项对象的禁用标识，就能实现原生禁用逻辑（包括无法选中、 hover 状态提示等）。

2. 修正模板标识
   你当前模板用的pTemplate="status"是错误的，p-dropdown的选项模板必须指定为pTemplate="item"才能正确渲染每个下拉选项。

3. 适配禁用状态样式
   结合绑定的禁用字段，给禁用选项添加视觉区分样式（比如降低透明度、修改光标样式）。

修改后的完整代码 #

<p-dropdown
    [options]="task.statusOptions"
    optionLabel="name"
    optionValue="id"
    (onChange)="updateTaskCurrentStatus($event, task)"
    appendTo="body"
    [placeholder]="this.dropdownPlaceholder(task)"
    <!-- 绑定禁用判断：这里假设status.enabled为false时表示禁用，可根据你的实际字段调整 -->
    [optionDisabled]="(status) => !status.enabled"
>
    <ng-template let-status pTemplate="item">
        <div 
            [ngStyle]="{ color: status.uiSetting.color}"
            <!-- 给禁用选项添加视觉样式 -->
            [class.opacity-50]="!status.enabled"
            [class.cursor-not-allowed]="!status.enabled"
        >
            {{ status.name }}
        </div>
    </ng-template>
</p-dropdown>

补充说明 #

• 如果你的status对象里有直接的disabled字段（比如status.disabled为true时禁用），可以简化optionDisabled的写法：optionDisabled="disabled"，无需使用箭头函数。
• 原生的optionDisabled会自动处理选项的交互禁用，比手动加pointer-events-none更可靠，同时会适配组件默认的禁用样式。

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