接收到 websocket 消息后，如何从组件 **ts** 文件中重新呈现角度组件视图？

Posted 2023-02-16

【中文标题】接收到 websocket 消息后，如何从组件 **ts** 文件中重新呈现角度组件视图？

【英文标题】：how to Rerender angular component view from the component's **ts** file after recieving a websocket message?

【发布时间】：2020-06-15 07:28:51

【问题描述】：

我有一个在 ngOnInit() 上初始化的用户列表，当我删除或添加或修改用户时，html 组件使用 reloadData() 函数重新呈现就好了.. 但是当我收到来自我的 webskoket 服务的消息时我调用 reloadData() 函数，它会从数据库中刷新模型，但不会刷新视图。

这是我的 EmployeesComponent.ts 上的 reloadData() 函数：

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);
        
      
    );
  
);

这是我显示用户的地方[]

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

这是 *ngFor 中调用的识别函数：

identify(index, item) 
return index;

这是由 websocket 触发的函数，在其中我调用 reloadData():

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

而且我知道代码运行良好，因为我正在控制台中记录所有内容。您可以在此处看到 “正在从 websocket 重新加载用户...” 消息正在记录中.. Console Screen Shot

正在重新加载模型，但未重新渲染视图。

谢谢????????

【参考方案1】：

我发现了问题..我将组件注入到服务中，因此它创建了一个新实例..所以它重新加载了新实例的数据，而不是屏幕上呈现的数据，这是解决方案解决这个问题：

How to call a component method from service class - Angular