Angular 遍历数组中的对象

Question

您好，这是我的 angular 项目，我想为每条发布的评论获取用户的用户名。这些实体来自我的 spring 引导项目。有没有办法为每条评论获取用户名？

这是评论日志。

这是我的评论服务class

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

这是我的组件

   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>

添加时出现错误

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

这是我的评论和用户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;

}

Answer 1

你正在做的应该有效。我会在访问道具时使用 ? 来防止此类错误。可能不是每个评论都有 userName（也许是某种匿名评论？）。

检查对象是否具有要访问的属性，如果有，*ngIf 的内容将在 html 中呈现。

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

然后完全实施class Comment。将您的回复 JSON 粘贴到此处，让它为您生成所有 classes/interfaces。 https://quicktype.io/typescript

Class Commnet 属性 user 应该是类型 User。另外我会放弃 ! 除非你确定你在做什么并且你想承认属性将永远在那里被访问（我会怀疑这一点）但是话又说回来，我不了解你的 API.

将 User 放在 Comment 内，也像这样检查其他类型。如果您解决了这个问题，那么之前使用 ? 对条件属性检查的检查可能会过时。

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


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

Answer 2

我猜你使用的是最新版本的 Typescript 在新版本的 typescript 中有 Optional Chaining 你的对象是 null 和 undefined 然后这个 Optional Chaining 运算符将帮助你确定这个对象 id null 或者未定义
在您的情况下，可选链接(?) 运算符将帮助您
Click here to known more about optional chaining

Angular 遍历数组中的对象

Angular loop through Object in array

html

loops

typescript

angular