Every time I try to post something, the system responds with a 405 error message in the console. I'm not sure what caused this issue or how to resolve it.
Alternatively, if I click the done button, the console displays a 500 error message.
Here is the HTML code snippet:
<input
(keyup.enter)="createPost(name)" #name
type="text" class="form-control">
<ul class="list-group">
<li
*ngFor="let post of posts"
[ngClass]="post.completed?'list-group-item list-group-item-success':'list-group-item'">
<button
(click)="updatePost(post)"
class="btn btn-outline-success btn-sm" id="button">
{{ post.completed ? 'Done' : 'Not ready' }}
</button>
<button
(click)="deletePost(post)"
class="btn btn-outline-danger ml-2 btn-sm">
Delete
</button>
{{ post.name }}
</li>
</ul>
And here is the TypeScript code:
export class ToDoAppComponent {
posts: any;
private url = 'http://todoapp.test/api';
constructor(private http: HttpClient) {
http.get(this.url).subscribe(response => {
this.posts = response;
});
}
createPost(input: HTMLInputElement) {
// tslint:disable-next-line: prefer-const
let post: any = { name: input.value }
input.value = '';
this.http.post(this.url, JSON.stringify(post)).subscribe(response => {
post.id = response.id;
this.posts.splice(0, 0, post);
});
}
updatePost(post) {
this.http.put(this.url + '/' + post.id, JSON.stringify({ status: !post.status })).subscribe(response => {
post.status = !post.status;
});
}
deletePost(post) {
this.http.delete(this.url + '/' + post.id, ).subscribe(response => {
let index = this.posts.indexOf(post);
this.posts.splice(index, 1);
})
}
}
Here are the error message screenshots and the server's response data: https://i.sstatic.net/vuk3z.jpghttps://i.sstatic.net/V96FV.jpg https://i.sstatic.net/zwvYr.jpg