title: Get object by ID angular 6:
body: <p>I have simple crud app , which I want user to be able to add comments and comments should be automatically displayed accordingly,</p>
  
  <p>Problems: comments are displayed after refresh and are displayed to other places,</p>
  
  <p>Here is services to get comments and add comments</p>
  
  <pre><code>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) { }
    taskUrl = 'http://localhost:3000/task';
    commentsUrl = 'http://localhost:3000/comment';
    createTask(task: Task) {
      return this.http.post(this.taskUrl, task);
    }
    getTask() {
      return this.http.get&lt;Task[]&gt;(this.taskUrl);
    }
    addComments(comment: Comment) {
      return this.http.post(this.commentsUrl, comment);
    }
    getComments(id: number) {
      return this.http.get&lt;Comment[]&gt;(this.commentsUrl);
    }
  }
  </code></pre>
  
  <p>Here is componets.ts</p>
  
  <pre><code>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 =&gt; {
          this.tasks = data;
        });
        this.activeRouter.params.subscribe((params) =&gt; {
          // tslint:disable-next-line:prefer-const
          let id = params['id'];
          this.userService.getComments(id)
          .subscribe(data =&gt; {
            this.comments = data;
            });
        });
        this.addForm = this.formBuilder.group({
          id: [],
          author: ['', Validators.required],
          description: ['', Validators.required],
        });
    }
  addComments() {
    this.userService.addComments(this.addForm.value)
    .subscribe(data =&gt; {
      this.router.navigate(['task-list']);
    });
  }
  }
  </code></pre>
  
  <p>Here is html I have for adding and displaying comments</p>
  
  <pre><code>&lt;div class="task-block card"&gt;
  &lt;div class="task-list" *ngFor="let task of tasks"&gt;
    &lt;div class="task-list_header"&gt;
      &lt;span&gt;{{task.title}}&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="task-list_description"&gt;
      &lt;p&gt;{{task.description}}&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="task-list_attachment"&gt;
      &lt;span&gt;Attachments&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="task-list_comments"&gt;
      &lt;p&gt;Comments&lt;/p&gt;
      &lt;div *ngFor="let comment of comments"&gt;
        &lt;ul class="list-group"&gt;
          &lt;li class="list-group-item"&gt;&lt;label class="text-icon"&gt;
              &lt;i class="fa fa-user-circle-o" aria-hidden="true"&gt;&lt;/i&gt;
            &lt;/label&gt; {{comment.author}}&lt;/li&gt;
          &lt;li class="list-group-item"&gt;{{comment.description}}&lt;/li&gt;
        &lt;/ul&gt;
        &lt;br&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;form [formGroup]="addForm" (ngSubmit)="addComments()"&gt;
      &lt;div class="form-group task-group"&gt;
        &lt;div class="form-group"&gt;
          &lt;label class=""&gt;Author&lt;/label&gt;
          &lt;input type="text" class="form-control" formControlName="author" id="author" /&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
            &lt;label class=""&gt;Comments&lt;/label&gt;
          &lt;textarea class="form-control task-textarea" rows="1" formControlName="description" id="description" &gt;&lt;/textarea&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="btn btn-default btn-submit"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is json mock up data</p>
  
  <pre><code>{
    "task": [
      {
        "id": 1,
        "title": "profil pracownika ",
        "description": "Task 1, "
      },
      {
        "id": 2,
        "title": "profil pracownika ",
        "description": "Task 2, "
      },
      {
        "id": 2,
        "title": "profil pracownika ",
        "description": "Man utd, "
      }
    ],
  
    "comment": [
      {
        "id": 1,
        "task_id": 1,
        "author": "Kanczynski",
        "description": "Przegrałes"
      },
      {
        "id": 2,
        "author": "January",
        "description": "eetet"
      }
    ],
    "profile": {
      "name": "typicode"
    }
  }
  </code></pre>
  
  <p>I want comments to be displayed automatically not after refresh, and should be displayed in a specific area where its commented. eg if commented in task one should only be displayed in task one, now display in both tasks</p>
  
  <p>What do I need to change to ge what I want? any help will be apreciated , thanks</p>