קבלת כל ה-items
פונקציית get מביאה מידע מתוך ה-DB.
נגדיר את מבנה הפוסטים שלנו:
post.model.ts
export interface Post{
id: number,
title: string,
content: string
}
נקרא לפונקציית ה-get שמביאה את כל הפוסטים הקיימים דרך ה-service. הפונקציה מחזירה לנו מערך של אובייקטים מסוג Post.
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`);
}
בקומפוננטה, כדי לטעון את המידע כשהדף נטען, נקרא לפונקציית ה-get מתוך ngOnInit.
app.component.ts
constructor(private postsService: PostsService){}
posts: Posts[];
ngOnInit(){
postsService.getPosts().subscribe(posts => {
this.posts = posts;
});
}
אחרי שיש לנו את המידע אפשר להציג אותו בדף.
app.component.html
<h3>All Posts</h3>
<table>
<tr>
<th>Title</th>
<th>Content</th>
</tr>
<tr *ngFor="let post of posts">
<td>
{{ post.title }}
</td>
<td>
{{ post.content }}
</td>
</tr>
</table>
קבלת item אחד
אם אנחנו רוצים לקבל מידע על פוסט בודד, אנחנו צריכים לשלוח את הקוד של הפוסט ל-DB. את הקוד של הפוסט אפשר לשלוח דרך ה-url של הפוסט. עוד בנושא יש בחלק שמדבר על של routes.
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`);
}
getPost(id: number): Observable<Post>{
return this.http.get<Post>(`${baseUrl}/posts/${id}`);
}
לשים לב: ללא קריאה ל-subscribe לא תהיה קריאה לפונקציית ה-get.