Angular loop through Object in array

Issue

Hi this is my angular project and I want to get userName of user for every posted comment. The entities are from my spring boot project. Is there a way to get a username for every comment?

This is comment log.

This is my comments Service class

  getAllCommentsForPost(postId: string): Observable<Comment[]>{
    return this.http.get<Comment[]>(this.PATH_OF_API + "/api/comment/get"+postId)
 }

This is my component

   comments!: Comment[];
  constructor(private router: Router,private postService: PostService, private commentService: CommentService) { }

this.commentService.getAllCommentsForPost(this.router.url).subscribe((data: Comment[]) =>{
      this.comments = data;
    })

Html

 <div class="mb-1" style="width: 60%" *ngFor="let comment of comments">

    {{comment.comment}}
    <p *ngIf="comment.voteCount > 0" class="likes" style="color: green">  Likes: {{comment.voteCount}} </p>
    <p *ngIf="comment.voteCount == 0" class="like" style="color: black"> Likes: {{comment.voteCount}} </p>
    <p *ngIf="comment.voteCount < 0" class="likes" style="color: red"> Likes: {{comment.voteCount}} </p>
    <a [routerLink]="['/like', comment.commentId]">  <p>like</p>  </a>
  </div>

I am getting error when i add

{{comment.user.userName}} 
{{comment.user['userName']}}

this is my comment and user class

export class Comment {
  commentId!: number;
  comment!: string;
  voteCount!: number;
  dateCreated!: string;
  user!: string;
  postId!: number;
}


export class User {
  userName!: string;
  userPic!: string;
  gender!: string;

}

Solution

What you are doing should work. I would prevent such errors with the use of ? when accessing props. It might be, that not each comment has a userName (perhaps a anonymous comment of a sort?).

Checks if object has properties to be accessed and if it does, contents of *ngIf is rendered in html.

<ng-container *ngIf="comment?.user?.userName"> 
  {{comment.user.userName}} 
</ng-container>

Afterwards implement class Comment fully. Paste your response JSON here to have it generate all the classes/interfaces for you. https://quicktype.io/typescript

Class Commnet prop user should be of type User. Also I would ditch the ! unless you are sure what you are doing and you want acknowledge that the property will always be there to be accessed (I would doubt this) but then again, I don't know your API.

Place User inside of Comment, go over other types like this as well. If you resolve this, then the previous check for conditional property checks using ? might become obsolete.

export class Comment {
  commentId!: number;
  comment!: string;
  voteCount!: number;
  dateCreated!: string;
  user!: User;
  postId!: number;
}


export class User {
  userName!: string;
  userPic!: string;
  gender!: string;
}

Answered By - Joosep.P