JsonServer使用“put”或“patch”回傳404，“get”作業正常

我在瀏覽器中通過幾個輸入更改來自組件內部服務器skills: SkillSet[]的資訊（ ） 。我想用兩個按鈕決定是否使用這些更改更新服務器。無法使 saveChanges 功能起作用。

技能組件保存更改功能：

saveChanges(): void {
    this.editMode = false;
    this.skillsService.saveChanges(this.skills).subscribe();
  }

技能服務保存更改功能：

// Update changes made by the component
  saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
    console.log(skills); // Proof the array is returning with the edits.
    return this.http.patch<SkillSet[]>(
      this.skillsUrl,
      skills,
      this.httpOptions
    );
  }

使用按鈕時，控制臺會回應PATCH http://localhost:5000/skills 404 (Not Found)它也不適用于 put。并且 url 有效，否則我的模板永遠不會首先獲取資料。網路/獲取/XHR 如果需要更多資訊，請告訴我。

--- 所有代碼 ---

技能組界面

export interface SkillSet {
  id: number;
  type: string;
  title: string;
  description: string;
  tools: string[];
}

技能組件（整個代碼）：

import { Component, OnInit } from '@angular/core';

import { SkillSet } from 'src/app/interfaces/skill-set';
import { SkillsService } from 'src/app/services/skills.service';

@Component({
  selector: 'app-skills',
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.scss'],
})
export class SkillsComponent implements OnInit {
  login: boolean = true;
  editMode: boolean = false;

  skills: SkillSet[] = [];
  newTool: string = '';

  constructor(private skillsService: SkillsService) {}

  ngOnInit(): void {
    this.getSkills();
  }

  getSkills() {
    this.skillsService
      .getSkills()
      .subscribe((skills) => (this.skills = skills));
  }

  // Edition functions of this section
  addTool(skillSet: SkillSet, tool: string) {
    if (tool) {
      skillSet.tools.push(tool);
    }
  }
  deleteTool(skillSet: SkillSet, tool: string) {
    skillSet.tools = skillSet.tools.filter((t) => t !== tool);
  }

  // Changes menu
  editStart() {
    this.editMode = true;
    console.log('Editing skills');
  }
  saveChanges(): void {
    this.editMode = false;
    this.skillsService.saveChanges(this.skills).subscribe();
  }
  cancelChanges() {
    this.editMode = false;
    this.getSkills();
  }
}

技能服務（全碼）：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable, of } from 'rxjs';

import { SkillSet } from '../interfaces/skill-set';

@Injectable({
  providedIn: 'root',
})
export class SkillsService {
  private skillsUrl = 'http://localhost:5000/skills';

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
    }),
  };

  constructor(private http: HttpClient) {}

  getSkills(): Observable<SkillSet[]> {
    return this.http.get<SkillSet[]>(this.skillsUrl);
  }

  // Update changes made by the component
  saveChanges(skills: SkillSet[]): Observable<SkillSet[]> {
    console.log(skills); // Proof the array is returning with the edits.
    return this.http.patch<SkillSet[]>(
      this.skillsUrl,
      skills,
      this.httpOptions
    );
  }
}

uj5u.com熱心網友回復：

使用 JSON-Server，每次 http 呼叫只能更新 1 個專案。通常你會這樣使用它：

http.patch(`{this.url}/{idToUpdate}`, bodyWithUpdate)

如果該專案是一個完整的結構，那么您可以更新完整的結構，但從它的外觀來看，您沒有那個。

要么更改json服務器回傳的結構，要么在技能集中找到更改的專案并多次呼叫補丁請求。

像這樣的東西：

skills.forEach((skill)=>{
   if (skill.changed){
       http.patch(`{this.url}/{skill.id}`, skill);
   }
})

標籤：有角度的 打字稿 https http头 json服务器

上一篇：手風琴切換檢查打開關閉-角度活動/非活動

下一篇：如何在金額表中將點轉換為逗號？