The value of the ng-reflect-ng-class attribute is not equal to the class attribute in the same element

Question

setActionButtonLableAndEnableAndDisable() : void{
    if(this.tabEnum ==this.rmvEnumData.RMV_APPROVAL_PENDING_TAB){
      if(this.selectedRecordInAllTab && this.selectedRecordInAllTab.length > 0){
        switch(this.selectedRecordInAllTab.length) { 
          case 1: { 
            this.isReverseAndActionBtnEnabled = true;
            this.acctionButtonLabel = "Action";
            this.actionButtonColor = "pull-right p-button-info mr-3";
            break; 
          } 
          case this.selectedRecordInAllTab.filter(el => el?.mpt_RmvStatusEnum == this.rmvEnumData.PARTIALLY_APPROVAL_PENDING).length: { 
            this.isReverseAndActionBtnEnabled = true;
            this.acctionButtonLabel =  "Partially Approve";
            this.actionButtonColor = "pull-right p-button-success mr-3";
            break; 
          } 
          case this.selectedRecordInAllTab.filter(el => el?.mpt_RmvStatusEnum ==this.rmvEnumData.RMV_LODGE).length : { 
            this.isReverseAndActionBtnEnabled = true;
            this.acctionButtonLabel =  "Approve";
            this.actionButtonColor = "pull-right p-button-success mr-3";
            break; 
          } 
          case this.selectedRecordInAllTab.filter(el => el?.mpt_RmvStatusEnum == this.rmvEnumData.RMV_LODGE 
            || el?.mpt_RmvStatusEnum ==this.rmvEnumData.PARTIALLY_APPROVAL_PENDING ).length : { 
            this.isReverseAndActionBtnEnabled = true;
            this.acctionButtonLabel = "Approval";
            this.actionButtonColor = "pull-right p-button-success mr-3";
            break; 
          } 
          default: { 
             break; 
          } 
       }  
      }
      else{
        this.isReverseAndActionBtnEnabled = false;
      }
    }else if(this.tabEnum == this.rmvEnumData.RMV_REJECTED_TAB){
      
      if(this.selectedRecordInAllTab && this.selectedRecordInAllTab.length > 0){
        this.isReverseAndActionBtnEnabled = true;
      }
      else{
        this.isReverseAndActionBtnEnabled = false;
      }
    }
  }

I created this function to dynamically change the actionButtonColor with class names.

<button *ngIf="(tabEnum == rmvEnumData.RMV_APPROVAL_PENDING_TAB) || (tabEnum == rmvEnumData.RMV_REJECTED_TAB)" [disabled]="!isReverseAndActionBtnEnabled"
                        icon="{{tabEnum == rmvEnumData.RMV_APPROVAL_PENDING_TAB ? 'fa-solid fa-check-double' : 'fa-solid fa-backward'}}" 
                        label="{{tabEnum == rmvEnumData.RMV_APPROVAL_PENDING_TAB ? acctionButtonLabel : reverseButtonLabel}}" pButton type="button"
                        [ngClass]="tabEnum == rmvEnumData.RMV_APPROVAL_PENDING_TAB ? actionButtonColor : reverseButtonColor"
                        (click)="tabEnum == rmvEnumData.RMV_APPROVAL_PENDING_TAB ? clickOnApprovalPendingActionBtn(acctionButtonLabel) : RmvRejectedReverseBtn()"
                        ></button>

When using the [ngClass] attribute to change the action button color and inspecting this button on browser, it is displayed as follows

enter image description here

In this case, the ng-reflect-ng-class attribute has the correct value, but the class attribute has a different value. Because of that, the color of the button sometimes works properly, but sometimes it does not. What should I do to fix this?

I tried interpolation to see the output, and it displayed correctly. However, I have no idea how to create a class, and ng-reflect-ng-class has the same value