Question

我在我的RESTful Web服务中添加了一个新任务，在subcribe方法中我以角度更新了我的任务数组。新任务立即显示在浏览器中，但如果我想删除它，此任务总是id等于0.如果我刷新站点（调用ngInit）删除工作正常。我想我必须在我的订阅方法中做一些不同的事情来从后端服务获取新的id。

    import {Component, OnInit} from "@angular/core";
import {TaskDataService} from "./tasks/task-data.service";
import {Task} from "./tasks/task";

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css'],
  providers: [TaskDataService]
})
export class TodoComponent implements OnInit {

  tasks: Task[] = [];

  constructor(private taskDataService: TaskDataService) {
  }
  public ngOnInit() {
    this.taskDataService
      .getAllTasks()
      .subscribe(tasks => this.tasks = tasks)
  }
  onAddTask(task: Task) {
    this.taskDataService
      .addTask(task)
      .subscribe(
        (data: Task) => {this.tasks.push(data)}
      );
  }
  onToggleTaskComplete(task) {
    this.taskDataService.toggleTaskComplete(task).subscribe((updatedTask) => {
      task = updatedTask;
    });
  }
  onRemoveTask(task) {
    this.taskDataService.deleteTask(task).subscribe();
    this.tasks = this.tasks.filter(t => t.id !== task.id);
  }
}

服务：

import {Injectable} from "@angular/core";
import {Task} from "./task";
import {Observable} from "rxjs/Observable";
import {catchError} from "rxjs/operators";
import {of} from "rxjs/observable/of";
import {HttpClient} from "@angular/common/http";
import {environment} from "../../../environments/environment";

const API_URL = environment.apiUrl;

@Injectable()
export class TaskDataService {

  constructor(private http: HttpClient) {
  }
  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {
      console.error(error, 'Operation: ${operation}');

      return of(result as T);
    }
  }
  addTask(task: Task): Observable<Task> {
    return this.http.post<Task>(API_URL + '/list/1/task/', task)
      .pipe(
        catchError(this.handleError<Task>('addTask'))
      )
  }
  deleteTask(task: Task): Observable<Task> {
    return this.http.delete<Task>(API_URL + '/task/' + task.id).pipe(
      catchError(this.handleError<Task>('deleteTask'))
    )
  }
  updateTask(task): Observable<any> {
    const url = '${this.API_URL}/task/${task.id}';

    return this.http.put(url, task).pipe(
      catchError(this.handleError<any>('update Product'))
    )
  }
  getAllTasks(): Observable<Task[]> {
    return this.http.get<Task[]>(API_URL + '/list/1/task/')
      .pipe(
        catchError(this.handleError('getTasks', []))
      );
  }
  getTaskById(id: number): Observable<Task> {
    const url = '${this.API_URL}/list/1/task/${id}';
    return this.http.get<Task>(url).pipe(
      catchError(this.handleError<Task>('getTask id=${id}'))
    )
  }
  toggleTaskComplete(task: Task) {
    task.complete = !task.complete;
    return this.updateTask(task);
  }
}

@Edit 服务器端的删除方法：

@RequestMapping(value = "/task/{id}", method = RequestMethod.DELETE)
    public void deleteTask(@PathVariable String id) {
        taskService.deleteTask(Integer.parseInt(id));
    }

如何在post方法后更新数组

0 个答案: