Question

我必须根据其帖子显示评论，但现在它正在显示单击“显示评论”按钮时，所有帖子的评论均相同。根据我的说法，我正在使用this.show在按钮单击时显示评论，我需要复制this.show以显示每个帖子的不同评论。但是无法理解该怎么做。

我正在使用-https://jsonplaceholder.typicode.com
https://jsonplaceholder.typicode.com/comments?postId=1

post.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataService} from '../data.service';
import { Router } from '@angular/router';
import { GetpostsService} from '../getposts.service';
import { comment} from '../entities/comment';

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  userId:number;
  postId:number;
  post=[];
  comments:any=[];
  show:boolean = false;


  constructor(private route:ActivatedRoute, private service: DataService, private router:Router,) { }

  ngOnInit() {
    this.userId = this.route.snapshot.params['userId'];
    this.service.getPost(this.userId).subscribe(u =>{
    this.post = u
      console.log(JSON.stringify(this.post));
    }
    )

  }

  showcomments(postId){
    this.show = !this.show;
    this.postId = this.route.snapshot.params['postId'];
    this.service.getComment(postId).subscribe(p =>{
    this.comments = p
      console.log(JSON.stringify(this.comments));
    }
    )

  }



}

post.component.html

<div style="width:80%">
<table class="table table-border" >
  <tr>
    <th>User Id</th>
    <th>Id</th>
    <th>Title</th>
    <th>Body</th>


  </tr>
  <tbody *ngFor="let posts of post">
  <tr style="background: lightblue">
    <td>{{posts.userId}}</td>
    <td>{{posts.id}}</td>
    <td>{{posts.title}}</td>
    <td>{{posts.body}}</td>
    <td><a class="btn btn-primary"  (click)='showcomments(posts.id)'>Show Comments</a></td>
  </tr>
  <tr >
    <td colspan="4" >
      <table class="table table-border" *ngIf='show==true'>
        <tr >
          <th>Post Id</th>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
          <th>Body</th>

        </tr>
        <tbody *ngFor="let comment of comments">
        <tr>
          <td>{{comment.postId}}</td>
          <td>{{comment.id}}</td>
          <td>{{comment.name}}</td>
          <td>{{comment.email}}</td>
          <td>{{comment.body}}</td>
          <td></td>
        </tr>
      </tbody>
      </table>
    </td>
  </tr>
</tbody>
</table>
</div>

Answer 1

请更改

<tbody *ngFor="let comment of comments">
     <tr>
          <td>{{comment.postId}}</td>
          <td>{{comment.id}}</td>
          <td>{{comment.name}}</td>
          <td>{{comment.email}}</td>
          <td>{{comment.body}}</td>
          <td></td>
      </tr>
</tbody>

到

<tbody>
   <tr *ngFor="let comment of comments">
      <td>{{comment.postId}}</td>
      <td>{{comment.id}}</td>
      <td>{{comment.name}}</td>
      <td>{{comment.email}}</td>
      <td>{{comment.body}}</td>
      <td></td>
    </tr>
</tbody>

更新：

为了获取每个帖子的真实数据，我认为您应该像这样更改showcomments函数

showcomments(postId){
    this.show = !this.show;
    this.postId = postId; //
    this.service.getComment(postId).subscribe(p =>{
    this.comments = p
      console.log(JSON.stringify(this.comments));
    }
    )

 }

如何根据每个帖子显示评论。我正在使用https://jsonplaceholder.typicode.com

1 个答案: