Model in TypeScript returns as an object not as model

Issue

in my angular app in my component I use .subscribe with model when get the model from storage.

.subscribe((tradeModel: TradeModel) => {
  if (tradeModel !== null && tradeModel !== undefined) {
    console.log(this.dragMoveTrade) // model;
    console.log(tradeModel) // object;
    console.log(tradeModel.Stage) // 2 (number);
  }

As you can see I use TradeModel in my subscribe obj. I can get for example from it any property. For example

`console.log(tradeModel.Stage)` ==> 2

But I can't set any value to any property. If I try

tradeModel.Stage = 3

I have an exeption

Cannot assign to read only property 'Stage' of object '[object Object]'

I have property in component dragMoveTrade: TradeModel = new TradeModel();

if I print both of them

console.log(this.dragMoveTrade);
console.log(tradeModel);

I see that this.dragMoveTrade is a real TradeModel. tradeModel only an object. Screenshot below

for this model I can change any property

this.dragMoveTrade.Stage = 3

Why my .subscribe with model return an object. Not a model or how I can convert it to the model?

class of TradeModel.

export class TradeModel {
public TradeId: string;
public ClientId: string;
public UserId: string;
public Stage: number;
}

Solution

Why my .subscribe with model return an object. Not a model or how I can convert it to the model?

As you wrote it in the comments, you are using ngrx for state management. In this particular case, when you select the data from the store, it returns the data as readonly, following the related redux principle (see 2.5.2).

---

If you would like to modify the data, you have to modify your effect (if you have one), or maybe do it in the reducer. Both of these can lead to hard-to-understand code, since under the hood something magical happens.

If you would like to do this by any cost, and you would like to do it in the given component, you can configure ngrx to not have those strict immutability checks.

StoreModule.forRoot(reducers, {
  runtimeChecks: {
    strictStateImmutability: false,
    strictActionImmutability: false,
  },
}),

This will affect the whole application (if you dont have subsequent stores). I think the best way would be to dispatch another action, when you model is there (the fetch has been finished), to modify it - if you would like to update your model at all.

Answered By - kfarkas