My template is displaying posts like this:
<div class="card mb-3" *ngFor="let post of posts">
<div class="card-body">
<h5 class="card-title">{{post.title}}</h5>
<p class="card-text">{{post.body}}</p>
<button (click)="removePost(post)" class="btn btn-danger"><i class="fa fa-remove"></i></button>
<button (click)="editPost(post)" class="btn btn-light"><i class="fa fa-pencil"></i></button>
</div>
</div>
The removal function utilizes a service called servicePost to delete posts.
removePost(post: Post) {
if (confirm('Are you sure?')) {
this.postService.removePost(post.id).subscribe(() => {
this.posts.forEach((current, index) => {
if (post.id === current.id) {
this.posts.splice(index, 1);
}
});
});
}
}
Here is the service itself:
export class PostService {
postsUrl: string = 'https://jsonplaceholder.typicode.com/posts';
constructor(private http: HttpClient) { }
removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;
const url = `${this.postsUrl}/${id}`;
return this.http.delete<Post>(url, httpOptions);
}
I am having trouble understanding this part:
removePost(post: Post | number): Observable<Post> {
const id = typeof post === 'number' ? post : post.id;
It seems the goal of this code is to extract the post.id in order to utilize it for the
this.http.delete<Post>(url, httpOptions);