1

I have a users list that gets initialized on ngOnInit(), and when i delete or add or modify a user the HTML component rerenders just fine with reloadData() function.. but when i recieve a message from my webskoket Service and i call the reloadData() function it refreshes the model from the database but not the view..

This is the reloadData() function on my EmployeesComponent.ts :

private reloadData() {
this.users = [];
console.log('reloading employees..');
console.log(this.users);
this.userService.list().subscribe(r => {
  if (this.router.url === '/RemoteMonitoring/(mainCon:Departments)' && this.clickedDep.depId !== -1) {
    this.chefDep = null;
    this.setChefDep(this.clickedDep.depId);
    this.usersForDep = r;
    for (const emp of this.usersForDep) {
      if (emp.department.depId === this.clickedDep.depId) {
        this.users.push(emp);
      }
    }
    this.clickedDep.users = [];
    this.clickedDep.users = this.users;
    this.outPutData.emit();
  } else {
    this.userService.findUserWithToken().subscribe(us => {
      for (const emp of r) {
        // @ts-ignore
        if (emp.userId !== us.userId) {
          this.users.push(emp);
        }
      }
    });
  }
});}

This is where i display users[]

 <tr *ngFor="let emp of users; let i = index; trackBy:identify">...</tr>

This is the identify function called in the *ngFor:

identify(index, item) {
return index;

}

This is the function triggered by the websocket and inside of it i call the reloadData():

reloadFromSocket() {
console.log('Reloading users from websocket...');
this.reloadData();

}

And i know the code is working just fine because i'm logging everything in the console.. and u can see here that the "Reloading users from websocket..." message is being logged.. Console Screen Shot

The model is being reloaded but the view isn't rerendering.

Thank you

Med Amine
  • 11
  • 1

1 Answers1

0

I found the problem .. i was injecting the component into the service and therefore it creates a new instance of it .. so it reloads the data of the new instance but not the one rendered on the screen and here's the solution to solve that :

How to call a component method from service class - Angular

Med Amine
  • 11
  • 1