javascript - 通过 ID 获取对象 angular 6 :

Question

我有一个简单的 crud 应用程序，我希望用户能够添加评论并且评论应该相应地自动显示，

问题:评论刷新后显示，显示到其他地方，

这里是获取评论和添加评论的服务

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<Task[]>(this.taskUrl);
  }
  addComments(comment: Comment) {
    return this.http.post(this.commentsUrl, comment);
  }
  getComments(id: number) {
    return this.http.get<Comment[]>(this.commentsUrl);
  }
}

这里是componets.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() {
  this.userService.addComments(this.addForm.value)
  .subscribe(data => {
    this.router.navigate(['task-list']);
  });
}
}

这是我用于添加和显示评论的 html

<div class="task-block card">
<div class="task-list" *ngFor="let task of tasks">
  <div class="task-list_header">
    <span>{{task.title}}</span>
  </div>
  <div class="task-list_description">
    <p>{{task.description}}</p>
  </div>
  <div class="task-list_attachment">
    <span>Attachments</span>
  </div>
  <div class="task-list_comments">
    <p>Comments</p>
    <div *ngFor="let comment of comments">
      <ul class="list-group">
        <li class="list-group-item"><label class="text-icon">
            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
          </label> {{comment.author}}</li>
        <li class="list-group-item">{{comment.description}}</li>
      </ul>
      <br>
    </div>
  </div>
  <form [formGroup]="addForm" (ngSubmit)="addComments()">
    <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>

这里是json模拟数据

{
  "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"
  }
}

我希望评论在刷新后自动显示，并且应该显示在其评论的特定区域。例如，如果在任务一中评论应该只在任务一中显示，现在在两个任务中显示

我需要改变什么才能得到我想要的东西？任何帮助将不胜感激，谢谢

Answer 1

编辑这个 component.ts 函数

addComments() {
  this.userService.addComments(this.addForm.value)
  .subscribe(data => {
    this.comments.push(this.addForm.value);
  });
 this.router.navigate(['task-list']);
}