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

请按照以下步骤操作：

步骤1）添加新评论后，我们必须将新评论详细信息添加到组件中的先前评论列表中。

第2步）如果您已经在“任务列表”页面中，则无需再次导航至“任务列表”页面。

因此，结合以上两个步骤后，我们可以形成如下代码：

 addComments() {
  this.userService.addComments(this.addForm.value)
  .subscribe(data => {
    // hoping the form data matches with your Comments class.
    // so I am directly adding to the list
    // here you can set a variable to check about successfull addition
    this.comments.push(this.addForm.value);
  });
}

因此，无论何时添加新评论，列表都会自动刷新并显示新添加的评论。

Answer 2

编辑此component.ts函数

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

通过角度为6的ID获取对象：

2 个答案: