HTML Not Rendering Data From Get Request

I'm working on chat application with c# as a server and angular as a client. I'm using SignalR for chatting between clients. My app is working well but I'm having trouble with getting a list of all connected users. I know for sure that the client is reaching the server with http get request (after connecting to SignalR) because I console.log the connected users list and I'm getting the data:

The problem is that when I try to print the items of the list - it's not rendering and the fields are staying empty:

I expect seeing in the list myself (my details) and later on if I'm connecting to the app from Incognito to update the connected users list. But right now as you can see, I don't see my info.

I'm putting only the relevent parts of my code:

user component 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();
              //getting all connected users
              this.userService.getConnectedUsers().subscribe((users)=>{
                this.users=users;
                console.log(this.users);
              })
              console.log("Signalr started successfully with connectionId: "   signalrHubConnectionId   " And ready to get messages");
            })
            .catch((error) => {
              console.log("Error while adding new chat client:", error);
              alert("Error while adding new chat client:"   error);
              console.log("chatClientId: "   this.chatClientId);
              console.log("signalrHubConnectionId: "   signalrHubConnectionId);
            });
      })
      .catch((error) => {
        console.log("Error while establishing signalr connection:", error);
        alert("Error while establishing signalr connection:"   error);
      });
  }

user component html (only the user list part)-

<h4 >List of Users</h4>
<div *ngFor="let user of users">
    <div >
        <div><strong>Name</strong>{{user.Name}}</div>
        <div><strong>Id</strong>{{user.ChatClientId}}</div>
        <hr>
    </div>
</div>

user service-

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
}

Server get request-

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

CodePudding user response：

The properties coming from your backend start with a lowercase letter, yet in your Angular-model their first letter is capitalized. As a consequence the mapping might not be working anymore.

Can you once try to modify your model as follows?:

import { Guid } from "guid-typescript"
export interface ConnectedClientModel {
    chatClientId: Guid,
    connectionId: string,
    name: string
}

And then also adapt the following two lines of your html:

<div><strong>Name</strong>{{user.name}}</div>
<div><strong>Id</strong>{{user.chatClientId}}</div>