Я пытаюсь создать базовое приложение телефонной книги c angular с возможностью просмотра, создания контактов. Я использовал запрос HTTPClient Post для создания контактов, аналогично тому, как это продемонстрировано в учебнике по Angular heroes, но запрос публикации не выполняется со следующей ошибкой "HttpErrorResponse {headers: HttpHeaders, status: 404, statusText:" Not Found ", url: "http://localhost: 4200 / assets / contacts. json", ok: false,…} "Ниже приведен мой служебный файл
import { HttpClient } from '@angular/common/http';
import { Contact } from './contact';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ContactInfoService {
constructor(private httpClient: HttpClient) { }
contactUrl = 'assets/contacts.json';
getContacts(): Observable<Contact []> {
return this.httpClient.get<Contact []>(this.contactUrl);
}
postContact(contact: Contact): Observable<Contact> {
return this.httpClient.post<Contact>(this.contactUrl,contact);
}
}
, это - component.ts
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, FormControl} from '@angular/forms';
import { Contact } from '../contact';
import { ContactInfoService } from '../contact-info.service';
@Component({
selector: 'app-contact-model',
templateUrl: './contact-model.component.html',
styleUrls: ['./contact-model.component.css']
})
export class ContactModelComponent {
contactForm: FormGroup;
contacts: Contact[];
constructor(
private formBuilder: FormBuilder,
private contactInfoService: ContactInfoService
) {
this.contactForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
eMail: new FormControl(''),
phoneNumber: new FormControl(''),
status: new FormControl('')
});
}
postContact(): void {
var newContact: Contact;
newContact = {};
newContact.firstName = this.contactForm.get('firstName').value;
newContact.lastName = this.contactForm.get('lastName').value;
newContact.email = this.contactForm.get('eMail').value;
newContact.phoneNumber = this.contactForm.get('phoneNumber').value;
newContact.status = this.contactForm.get('status').value;
console.log(newContact);
this.contactInfoService.postContact(newContact).subscribe(contact => this.contacts.push(contact));
}
getContacts(): void {
this.contactInfoService.getContacts().subscribe(contacts => (this.contacts = contacts));
}
}
это html файл
<div class="jumbotron">
<h3>New Contact</h3>
<form [formGroup]= "contactForm">
<div>
<label for="firstName">
First Name
</label><br>
<input id="firstName" type="text" formControlName="firstName">
</div>
<div>
<label for="lastName">
Last Name
</label><br>
<input id="lastName" type="text" formControlName="lastName">
</div>
<div>
<label for="eMail">
Email
</label><br>
<input id="eMail" type="email" formControlName="eMail">
</div>
<div>
<label for="phoneNumber">
Phone Number
</label><br>
<input id="phoneNumber" type="tel" formControlName="phoneNumber" pattern="[0-9]{10}">
</div>
<div>
<label>
Status
</label><br>
<input id="Active" type="radio" value="Active" formControlName="status">
<label for="Active">Active</label><br>
<input id="Inactive" type="radio" value="Inactive" formControlName="status">
<label for="Inactive">Inactive</label><br>
</div>
<button type="submit" (click)="postContact(); getContacts()">Add</button>
</form>
</div>
это json файл
[
{
"id": "1",
"firstName":"abc",
"lastName":"cba",
"email":"abc_cba@abc.com",
"phoneNumber":"1234567890",
"status":"active"
},
{
"id": "2",
"firstName":"def",
"lastName":"fed",
"email":"def_fed@def.com",
"phoneNumber":"0987654321",
"status":"inactive"
}
]
Когда я нажимаю кнопку Добавить, на вкладке сети Я вижу почтовый запрос со статусом 404. Я нашел несколько вопросов, похожих на этот, но ни один не работал для меня. Если у вас есть идеи, как решить эту проблему, или у вас возникла подобная проблема - любая помощь или комментарий будут высоко оценены.
Спасибо