Search code examples
angularngrx

Can't assign object's properties inside the subscribe() function in Angular

I defined the object persnel of type prsnlStateInterface and trying to assign the properties by subscription to an observable fails. Here is the persnels definition:

 persnels : prsnlStateInterface = {
    id :'',
    firstname:'',
    lastname : '',
    fullname :'',
    profession : '',
    dob : '',
    nationality: '',
    createdDate: '',
    sex: '',
    gender :'',
    phone :0,
    adresse : '',
    prsnlRoleIds : [0],
    total :0,
    selectedUserId :0,
    ids :[] ,
    entities :{},
  }

Here is the the prsnlStateInterface:

export interface prsnlStateInterface {
    "id": String,
    "firstname": String,
    "lastname": String,
    "fullname": String,
    "profession": String,
    "dob": String,
    "nationality": String,
    "createdDate": String,
    "sex": String,
    "gender": String,
    "phone": number,
    "adresse": String,
    "prsnlRoleIds": [number],
    "total": number,
    "selectedUserId":number,
    "ids":[], 
    "entities":{}
}

And this is how I subscribe to the promise:

return this.persnlService.getPersnl(data)
    .pipe(
      map((response) => response)
    ).subscribe((obj) => {
    for (const prsnl of Object.values(obj)[2]) {
      console.log('ids', prsnl.id);
      this.persnels = {
        id : prsnl.id,
        firstname: prsnl.id,
        lastname : prsnl.firstname,
        fullname: prsnl.fullname,
        profession: prsnl.function,
        dob: prsnl.dob,
        nationality: prsnl.nationality,
        createdDate: prsnl.createdDate,
        sex: prsnl.sex,
        gender: prsnl.gender,
        phone: prsnl.phone,
        adresse: prsnl.adresse,
        prsnlRoleIds: prsnl.prsnlRoleIds,
        total: 10,
        selectedUserId:0,
        ids:[] ,
        entities:{},
      };
    }; this.store.dispatch(loadPrsnls({this.persnels}));
  })

The problem is that Visual Studio is complaining about the {this.persnels} when trying to dispatch the data inside NgRx store with this.store.dispatch(loadPrsnls({this.persnels})). It says:

Argument of type '{ this: any; }' is not assignable to parameter of
type '{ prsnls: prsnlStateInterface[]; }'.
   Object literal may only specify known properties, and 'this' does not exist in type '{ prsnls: prsnlStateInterface[]; }

Here is a screenshot: enter image description here

What I don't understand is that I've not defined persnels of type any, but of type prsnlStateInterface. Moreover, when I replaced this.store.dispatch(loadPrsnls({this.persnels})) by console.log('persnl', this.persnels) the project compiles but in the console the prsnels properties are undefined.

What am I missing here and how to get it right?

Solution

  • You have to assign this.prsnls to a property. Without knowing how the action is typed, try the following (or something similar):

    //                               👇 assign the value to the `persnels` property
this.store.dispatch(loadPrsnls({ persnels: this.persnels}))