Angular 8：POST http：// localhost：4200 / assets / data / students.json 404（未找到）

我正在做一个项目，该项目可以使用HTTP来获取数组数据，并且应该也可以使用HTTP添加新数组，但是每次尝试发布新数组时，我都会得到：

POST http：// localhost：4200 / assets / data / students.json 404（未找到）

这很奇怪，因为我能够从url中获取数据而不会出错，但是无法在其中发布新数组。

这是我的项目的结构：

student.service.ts：

import { Injectable } from '@angular/core';
import {HttpClient,HttpErrorResponse,HttpHeaders} from '@angular/common/http';
import { IStudent} from './student'
import { Observable, of } from 'rxjs'
 import { catchError,map, tap } from 'rxjs/operators'
@Injectable({
  providedIn: 'root'
})
export class StudentService {

private  _url:string = "/assets/data/students.json";

constructor(private _http : HttpClient) { }

   delete(id: number) {
     return this._http.delete(`/student/` + id);
 }

 getStudents():Observable<IStudent[]>{
   return this._http.get<IStudent[]>(this._url);
 }


  addStudent(student : IStudent ):Observable<IStudent>{
    return this._http.post<IStudent>(this._url,student);
  }




}

学生

export class IStudent{
  id:number;
  name:string;
  age:number
}

/assets/data/students.json

[
  {"id":1,"name":"John","age":22},
  {"id":2,"name":"Austine","age":26},
  {"id":3,"name":"Samantha","age":24},
  {"id":4,"name":"Lily","age":25}
]

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule,routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentListComponent } from './student-list/student-list.component';
import { StudentDetailComponent } from './student-detail/student-detail.component';
import { FormsModule } from '@angular/forms'
import {StudentService} from './student.service';
import {HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    StudentListComponent,
    StudentDetailComponent,
    routingComponents
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
  ],
  providers: [StudentService],
  bootstrap: [AppComponent]
})
export class AppModule { }

学生详细信息

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute,Router,ParamMap } from '@angular/router';
import {StudentService} from '../student.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {IStudent} from '../student';
import { HttpClient } from "@angular/common/http";
@Component({
  selector: 'app-student-detail',
  template: `
  <h2>Student Form</h2>
  <ul class="student" >
      <li   *ngFor = "let student of students">
      <span class="badge">{{student.id}} {{student.name}} {{student.age}}</span>
  </li>
</ul>
  <form >
  <div class="form-group">
      <label>ID:</label>
      <input #SID type="number"  class="form-control" id="id" name="id">
</div>

    <div class="form-group">
      <label>Name:</label>
      <input  #SName type="text"  class="form-control" id="name" name="name">
</div>
<div class="form-group">
      <label>Age:</label>
      <input #SAge type="number"  class="form-control" id="name" name="name">
</div>

<button (click)="add(SID.value,SName.value,SAge.value)" type="submit">Add</button>
</form >


 `,



  styleUrls: ['./student-detail.component.css']
})
export class StudentDetailComponent implements OnInit {

 public students = [];
public studentId;
public studentName;
public studentAge;
registerForm : FormGroup;


  constructor(private route : ActivatedRoute,private router: Router,private _studentService: StudentService) { }


  ngOnInit() {
    this._studentService.getStudents()
      .subscribe(data => this.students = data);
      }

        add(id:number,name:string,age:string): void {
         this._studentService.addStudent({ id } as IStudent)
           .subscribe(student => {
             this.students.push(student);

           });
       }
      }