Angular List Filled in constructor is Not defined in method

Question

I have an Angular 9 component with a service injected in constructor and used inside the constructor to fill a list of a certain model as following:

 export class translationtasksComponent implements OnInit { 
    usertaskslist: UserTaskType[];
    constructor( public service3: UserService) {   
    service3.getTasks().subscribe(res => { this.usertaskslist = res as UserTaskType[] });
     }  
    }

inside the same component I have a 2 methods where I'm trying to use the previous list as following:

 getFilteredUsers(options) {
        return {
          store: this.usertaskslist,
          filter: options.data ? ["taskTypeId", "=", options.data.userTaskTypeTaskTypeId] : null
        };
      }

 setUserValue(rowData: any, value: any) {
        .
        .
         console.log( this.usertaskslist)
        .
        .
      }

the constructor is working well and filling the list. also the first method is working fine but in the second method the list is returning "undefined". I tried to call the service again inside setUserValue method as a work around but the service is also undefined and not recognized as a service.

Note: I'm using .net core with Angular template.

the 2 methods are events fired by dxDataGrid from DevExtreme.

Answer 1

I found a solution but I don't know if I'm understanding all the aspects of it. It seems like the fired event (setUserValue) which is fired when editing a dxDataGrid cell does not have direct access to the component instance for some reason. But it turned out that I can pass the component instance to it in constructor and then receive it in my handler and use it. and it works perfectly well as following:

constructor(public service3: UserService) {
    service3.getTasks().subscribe(res => { this.usertaskslist = res as UserTaskType[] });
    .
    .
   let that = this,
   origOnSetCellValue = this.setUserValue;
   this.setUserValue = function () {
     origOnSetCellValue.apply(this, [].slice.call(arguments, 0, 3).concat([that]));
   };

  }

.
.
setUserValue(rowData: any, value: any, currentData, componentInstance) {

    var currentUserId = currentData.userTaskTypeUserId;
    var currentTaskType = currentData.userTaskTypeTaskTypeId;
    var currentUserTask = componentInstance.usertaskslist;
}