Angular 8: POST http://localhost: 4200 / активы / данные / студенты. json 404 (не найдено)

Question

Я делаю проект, который может извлекать данные массива с использованием HTTP и должен также добавлять новый массив с использованием HTTP, но каждый раз, когда я пытаюсь опубликовать новый массив, я получаю:

POST http://localhost: 4200 / активы / данные / студенты. 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);
  }




}

student.ts

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

/ assets / data / студентов. 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 { }

student.detail.ts

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);

           });
       }
      }

Answer 1

Вы пытаетесь записать в локальный файл. Сценарий Java не поддерживает запись в локальный файл.

Поэтому вместо JSON создайте массив переменных типа в сервисе и напишите методы для pu sh для него и для Get тоже.

Answer 2

Как комментарий durai, я должен создать массив в сервисе и написать методы для pu sh для него и для Get тоже.

Я создаю новый сервис и поддельную базу данных для хранения массива тогда я могу разместить новый массив в него. Этот сайт очень помогает: https://angular.io/tutorial/toh-pt6#simulate -a-data-server

Мой новый сервис для хранения массива

import { InMemoryDbService } from 'angular-in-memory-web-api';
import {IStudent} from './student';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService{

  createDb() {
    const students = [
  {"id":1,"name":"John","age":22},
  {"id":2,"name":"Austine","age":26},
  {"id":3,"name":"Samantha","age":24},
  {"id":4,"name":"Lily","age":25}
    ];
    return {students};
  }

  genId(students: IStudent[]): number {
    return students.length > 0 ? Math.max(...students.map(student => student.id)) + 1 : 11;
  }

  constructor() { }
}

Сервис для получения и добавления массива .

import { Injectable } from '@angular/core';
import {HttpClient,HttpErrorResponse,HttpHeaders} from '@angular/common/http';
import { IStudent} from './student'
//import 'rxjs/add/operator/catch';
//import 'rxjs/add/Observable/throw';
import { Observable, of } from 'rxjs'
 import { catchError,map, tap } from 'rxjs/operators'

@Injectable({
  providedIn: 'root'
})
export class StudentService {
private  _url = 'api/students';

constructor(private _http : HttpClient) { }

//   getAll() {
//      return this._http.get<Student[]>(`/students`);
//  }


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

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

 getStudentsbyId(id: number): Observable<IStudent> {
  return this._http.get<IStudent>(this._url);
}

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