PrimeNG p-cellEditor禁用状态无灰色显示问题求助

你的问题出在仅给编辑态的输入框设置了禁用，但默认显示的output模板没有同步禁用样式，所以平时看不出状态，只有点击进入编辑才知道。下面是具体的修复方案：

修改后的代码 #

<p-cellEditor style="width: 100%;" [editable]="!disableFieldEdit">
  <ng-template pTemplate="input">
    <p-inputNumber [(ngModel)]="object.amount" 
                   name="chargedAmount" 
                   mode="currency" 
                   currency="PHP" 
                   [disabled]="disableFieldEdit" />
  </ng-template>
  <ng-template pTemplate="output">
    <span [ngClass]="{'p-disabled': disableFieldEdit}">
      {{ object.amount | currency: 'PHP'}}
    </span>
  </ng-template>
</p-cellEditor>

关键改动说明 #

1. 给p-cellEditor添加[editable]绑定：
   直接控制单元格是否允许进入编辑模式，禁用状态下连点击都触发不了编辑，逻辑更严谨。

2. 给output模板的内容添加禁用样式：
   用PrimeNG自带的p-disabled类，会自动应用灰色半透明、鼠标禁用等禁用态样式，和输入框的禁用视觉效果保持一致，不需要自己写额外CSS。

如果不想用PrimeNG的内置类，也可以用内联样式替代：

<span [style]="disableFieldEdit ? 'opacity: 0.6; pointer-events: none;' : ''">
  {{ object.amount | currency: 'PHP'}}
</span>

这样修改后，禁用状态下单元格默认显示就会变成灰色，用户一眼就能看出是不可编辑的，同时也无法触发编辑操作，完全解决你的问题。

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