Angular获取SignalR连接用户列表后无法渲染数据问题

我正在开发一个以C#为服务端、Angular为客户端的聊天应用，通过SignalR实现客户端间通信。应用其他功能正常，但获取所有已连接用户列表时遇到问题：HTTP Get请求能成功从服务端获取数据（控制台可打印出用户列表），但页面渲染用户列表时字段为空，无法显示用户信息。预期能在列表中看到自身信息，且隐身窗口登录后列表能更新，但当前无法实现。

用户组件TS代码 #

export class UsersComponent implements OnInit {
  private signalrConnectionUrl='https://localhost:7014/userHub';
  private addClientUrl='https://localhost:7014/Contacts/AddChatClient';
  private sendMessageToAllUrl='https://localhost:7014/Contacts/SendMessageToAll';

  chatClientId= getClientId();
  chatMessage: string="";

  userName=getUserName();
  users: ConnectedClientModel[]=[];   

  constructor(public signalRService: SignalrService, private userService: UsersService, private http: HttpClient) { }

  ngOnInit(): void {
    this.startSignalrConnection();
  };

  startSignalrConnection(): void {
    this.signalRService.startSignalrConnection(this.signalrConnectionUrl)
      .then((signalrHubConnectionId) => {
        firstValueFrom(this.http.post(this.addClientUrl, 
          buildNewChatClientConnectionModel(this.chatClientId, signalrHubConnectionId, this.userName!)))
            .then((response) => {
              this.signalRService.addListeners();
              // 获取所有已连接用户
              this.userService.getConnectedUsers().subscribe((users)=>{
                this.users=users;
                console.log(this.users);
              })
              console.log("Signalr连接成功，ConnectionId: " + signalrHubConnectionId + " 已准备好接收消息");
            })
            .catch((error) => {
              console.log("添加聊天客户端时出错:", error);
              alert("添加聊天客户端时出错:" + error);
              console.log("chatClientId: " + this.chatClientId);
              console.log("signalrHubConnectionId: " + signalrHubConnectionId);
            });
      })
      .catch((error) => {
        console.log("建立Signalr连接时出错:", error);
        alert("建立Signalr连接时出错:" + error);
      });
  }

用户组件HTML（仅用户列表部分） #

<h4 class="mb-3">用户列表</h4>
<div *ngFor="let user of users">
    <div class="mb-2 mt-2">
        <div><strong>姓名</strong>{{user.Name}}</div>
        <div><strong>ID</strong>{{user.ChatClientId}}</div>
        <hr>
    </div>
</div>

用户服务代码 #

export class UsersService {
  private getConnectedUsersUrl='https://localhost:7014/Contacts/GetConnectedUsers';

  constructor(private http: HttpClient) { }

  getConnectedUsers(): Observable<ConnectedClientModel[]> {
    return this.http.get<ConnectedClientModel[]>(this.getConnectedUsersUrl);
  }
}

ConnectedClientModel #

import { Guid } from "guid-typescript"
export interface ConnectedClientModel {
    ChatClientId: Guid,
    ConnectionId: string,
    Name: string
}

服务端Get请求代码 #

[HttpGet("GetConnectedUsers")]
public async Task<IActionResult> GetConnectedUsers()
{
  var allConnectedUsers = _signalrService.GetAllConnectedUsers();
  return Ok(allConnectedUsers.Entity);
}

内容的提问来源于stack exchange，提问作者Inbar Manor