Угловой 6: отображать комментарии в разделе комментариев

Question

У меня есть приложение crud, пользователь которого может добавлять комментарии, я хочу, чтобы комментарии отображались под каждым комментарием к разделу, теперь все добавленные комментарии отображаются под всем разделом.

вот компоненты ts

import { Component, OnInit } from '@angular/core';
import { Task } from '../model/task.model';
import { Comment } from '../model/comment.model';
import { Router } from '@angular/router';
import { UserService } from '../service/user.service';
import {first} from 'rxjs/operators';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
})
export class TaskListComponent implements OnInit {
tasks: Task[];
comments: Comment[];
  // tslint:disable-next-line:max-line-length
  constructor(private formBuilder: FormBuilder, private router: Router,  private activeRouter: ActivatedRoute, private userService: UserService) { }
  addForm: FormGroup;
  ngOnInit() {
    this.userService.getTask()
      .subscribe( data => {
        this.tasks = data;
      });
      this.activeRouter.params.subscribe((params) => {
        // tslint:disable-next-line:prefer-const
        let id = params['id'];
        this.userService.getComments(id)
        .subscribe(data => {
          this.comments = data;
          });
      });
      this.addForm = this.formBuilder.group({
        id: [],
        author: ['', Validators.required],
        description: ['', Validators.required],
      });
  }
  addComments(task_id) {
    const formData = this.addForm.value;
    formData.task_id = task_id;
    this.userService.addComments(formData)
    .subscribe(data => {
      this.comments.push(this.addForm.value);
    });
   this.router.navigate(['task-list']);
  }
}

Вот список задач html, который у меня есть

<div class="container task-list">
    <div class="row">
        <div class="col-sm-8">
            <div class="panel panel-white post panel-shadow" *ngFor="let task of tasks">
                <div class="post-heading"> 
                    <div class="pull-left meta">
                        <div class="title h4">
                            <a href="#"><b>{{task.title}}</b></a>
                        </div>
                        <h6 class="text-muted time">1 minute ago</h6>
                    </div>
                </div> 
                <div class="post-description"> 
                    <p>{{task.description}}</p>
                    <div class="stats">
                        <a href="#" class="btn btn-default stat-item">
                            <i class="fa fa-thumbs-up icon"></i>2
                        </a>
                        <a href="#" class="btn btn-default stat-item">
                            <i class="fa fa-thumbs-down icon"></i>12
                        </a>
                    </div>
                </div>
                <form class="post-form" [formGroup]="addForm" (ngSubmit)="addComments(task.id)">

                    <div class="form-group task-group">
                      <div class="form-group">
                        <label class="">Author</label>
                        <input type="text" class="form-control" formControlName="author" id="author" />
                      </div>
                      <div class="form-group">
                          <label class="">Comments</label>
                        <textarea class="form-control task-textarea" rows="1" formControlName="description" id="description" ></textarea>
                      </div>
                    </div>
                    <button class="btn btn-default btn-submit">Submit</button>
                  </form>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="panel panel-white post panel-shadow" *ngFor="let comment of comments">
                <div class="post-heading">
                    <div class="pull-left image">
                        <img src="http://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
                    </div>
                    <div class="pull-left meta">
                        <div class="title h5">
                            <a href="#"><b>{{comment.author}}</b></a>
                            made a post.
                        </div>
                        <h6 class="text-muted time">1 minute ago</h6>
                    </div>
                </div> 
                <div class="post-description"> 
                    <p>{{comment.description}}</p>
                    <div class="stats">
                        <a href="#" class="btn btn-default stat-item">
                            <i class="fa fa-thumbs-up icon"></i>2
                        </a>
                        <a href="#" class="btn btn-default stat-item">
                            <i class="fa fa-thumbs-down icon"></i>12
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Вот сервисы для получения задачи и комментариев

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../model/user.model';
import { Task } from '../model/task.model';
import { Comment } from '../model/comment.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {

  constructor(private http: HttpClient) { }
  baseUrl = 'http://localhost:3000/users';
  taskUrl = 'http://localhost:3000/task';
  commentsUrl = 'http://localhost:3000/comment';

  getUsers() {
    return this.http.get<User[]>(this.baseUrl);
  }
  getUserById(id: number) {
    return this.http.get<User>(this.baseUrl + '/' + id);
  }
  createUser(user: User) {
    return this.http.post(this.baseUrl, user);
  }
  updateUser(user: User) {
    return this.http.put(this.baseUrl + '/' + user.id, user);
  }
  deleteUser(id: number) {
    return this.http.delete(this.baseUrl + '/' + id);
  }
  createTask(task: Task) {
    return this.http.post(this.taskUrl, task);
  }
  getTask() {
    return this.http.get<Task[]>(this.taskUrl);
  }
  addComments(comment: Comment) {
    return this.http.post(this.commentsUrl, comment);
  }
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }
  /*
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl + id);
  }
  */
}

Проблема: когда я добавляю комментарии в определенной задаче, отображается ниже всезадание, которое у меня есть,

Вот изображение, как оно выглядит после добавления комментария

Вот что я хочу

Что мне нужно изменить в моем коде, чтобы получить то, что я хочу?спасибо