ביטול item אחד
פונקציית delete תבטל מידע מתוך ה-DB.
נוסיף בכל שורת מידע שיש לנו כפתור כדי לבטל את הפוסט. הכפתור הזה יוביל לפונקציית הביטול שמוגדרת בקומפוננטה.
app.component.html
<h3>All Posts</h3>
<table>
<tr>
<th>Title</th>
<th>Content</th>
<th>Delete</th>
</tr>
<tr *ngFor="let post of posts">
<td>
{{ post.title }}
</td>
<td>
{{ post.content }}
</td>
<td><Button class="btn-delete" (click)="onDeletePost(post.id)">
Delete Post</Button></td>
</tr>
</table>
נגדיר את פונקציית ה-delete ב-service.
posts.service.ts
baseUrl = 'http://localhost:3000'
constructor(private http: HttpClient){}
createPost(post: Post){
return this.http.post(`${baseUrl}/posts`, post);
}
getPosts(): Observable<Post[]>{
return this.http.get<Post[]>(`${baseUrl}/posts`);
}
deletePost(id: number){
return this.http.delete(`${baseUrl}/posts/${id}`);
}
בקובץ הקומפוננטה נקרא לפונקציית הביטול של ה-service מתוך פונקציית הלחיצה על הביטול בטבלה.
app.component.ts
constructor(private postsService: PostsService){}
onDeletePost(id: number){
this.postsService.deletePost(id).subscribe(response => {
console.log(response);
});
}
ביטול כל ה-items
אם אנחנו רוצים לבטל את כל הפוסטים, אפשר לקרוא לפונקציית delete בלי להעביר אליה id.
posts.service.ts
baseUrl = 'http://localhost:3000'
constructor(private http: HttpClient){}
createPost(post: Post){
return this.http.post(`${baseUrl}/posts`, post);
}
getPosts(): Observable<Post[]>{
return this.http.get<Post[]>(`${baseUrl}/posts`);
}
deletePost(id: number){
return this.http.delete(`${baseUrl}/posts/${id}`);
}
deleteAllPosts(){
return this.http.delete(`${baseUrl}/posts/`);
}
לשים לב: ללא קריאה ל-subscribe לא תהיה קריאה לפונקציית ה-delete.