263. Outputting Posts
Jul 21, 2026 06:04
· 2:15
· English
· Whisper Turbo
· 2 གསལ་བཤད་
This transcript expires in ༡༢ ཟླ་ ༡༢ ཚེས་ ༢༠༡༢ 7 ཉིན།
གནས་བརྟན་གྱི་གནས་བཞག་གོང་འཕེལ་བཏང། →
སྟོན་རྐྱངམ་ཅིག་
0:01
S…
Speaker 1 (263. Outputting Posts)
Let's now output our data now that we're fetching it.
0:04
S…
Speaker 2 (263. Outputting Posts)
For that,
0:05
S…
Speaker 1 (263. Outputting Posts)
when we're getting the data,
0:06
S…
Speaker 1 (263. Outputting Posts)
instead of logging it,
0:07
S…
Speaker 1 (263. Outputting Posts)
since we now transformed this into an array of posts,
0:10
S…
Speaker 1 (263. Outputting Posts)
we can set this loadedPost,
0:12
S…
Speaker 1 (263. Outputting Posts)
which is our property I created earlier,
0:15
S…
Speaker 1 (263. Outputting Posts)
where we now also can be more explicit about the type it will store,
0:18
S…
Speaker 1 (263. Outputting Posts)
because that will be an array of posts,
0:20
S…
Speaker 1 (263. Outputting Posts)
of course.
0:20
S…
Speaker 1 (263. Outputting Posts)
We can set this loadedPost here equal to
0:24
S…
Speaker 1 (263. Outputting Posts)
the posts we fetched.
0:27
S…
Speaker 1 (263. Outputting Posts)
Now we just have to use loaded posts in our template.
0:30
S…
Speaker 2 (263. Outputting Posts)
And for that,
0:31
S…
Speaker 1 (263. Outputting Posts)
of course, in this area where I say no posts available,
0:34
S…
Speaker 1 (263. Outputting Posts)
I only want to say that if we really have no posts.
0:38
S…
Speaker 1 (263. Outputting Posts)
So I'll add ngif here and check if loaded
0:42
S…
Speaker 1 (263. Outputting Posts)
posts length is smaller than one,
0:46
S…
Speaker 1 (263. Outputting Posts)
which means we have no posts.
0:47
S…
Speaker 2 (263. Outputting Posts)
If it is longer than one,
0:49
S…
Speaker 1 (263. Outputting Posts)
then I want to output an unordered list with a class of list group,
0:53
S…
Speaker 2 (263. Outputting Posts)
which is a bootstrap class.
0:55
S…
Speaker 1 (263. Outputting Posts)
which has list items with list group item as
1:00
S…
Speaker 1 (263. Outputting Posts)
a class.
1:00
S…
Speaker 1 (263. Outputting Posts)
And in there we'll have a h1 tag for the title and
1:04
S…
Speaker 1 (263. Outputting Posts)
a paragraph for the content of the post.
1:06
S…
Speaker 1 (263. Outputting Posts)
Now I want to only show this of course and
1:10
S…
Speaker 1 (263. Outputting Posts)
hence I'll add ngif on the unordered list if loaded post's length is
1:15
S…
Speaker 1 (263. Outputting Posts)
greater or equal than one.
1:16
S…
Speaker 1 (263. Outputting Posts)
So it's the opposite of this condition here.
1:20
S…
Speaker 2 (263. Outputting Posts)
If that's true,
1:21
S…
Speaker 2 (263. Outputting Posts)
we'll show that list.
1:22
S…
Speaker 1 (263. Outputting Posts)
And now I want to loop through all the loaded posts and recreate a list item
1:26
S…
Speaker 1 (263. Outputting Posts)
for every loaded post.
1:28
S…
Speaker 1 (263. Outputting Posts)
So here I'll add ng4 to go through all my posts.
1:32
S…
Speaker 1 (263. Outputting Posts)
So I'll name this post of loaded posts.
1:35
S…
Speaker 1 (263. Outputting Posts)
And then here we can output post title
1:39
S…
Speaker 1 (263. Outputting Posts)
and for the paragraph,
1:42
S…
Speaker 1 (263. Outputting Posts)
we can output post content.
1:48
S…
Speaker 2 (263. Outputting Posts)
Let's have a look at whether this works.
1:49
S…
Speaker 1 (263. Outputting Posts)
If this now reloads,
1:51
S…
Speaker 1 (263. Outputting Posts)
it fetches the posts and you see there after these posts appear here.
1:54
S…
Speaker 1 (263. Outputting Posts)
Now maybe the heading is a bit big.
1:56
S…
Speaker 1 (263. Outputting Posts)
Let's maybe use H3 here.
1:59
S…
Speaker 1 (263. Outputting Posts)
But the important takeaway is that our data loads,
2:02
S…
Speaker 1 (263. Outputting Posts)
of course.
2:03
S…
Speaker 1 (263. Outputting Posts)
Now that is super awesome.
2:05
S…
Speaker 1 (263. Outputting Posts)
And this shows us how we can make the step from loading
2:09
S…
Speaker 1 (263. Outputting Posts)
the data to outputting it in our frontend.
ཡིག་སྒྱུར་འདི་ བཅོས་མའི་བློ་རིག་ (སྒྲ་ངོས་འཛིན་བྱེད་པའི་འཕྲུལ་རིག་) གིས་བཟོ་སྟེ་ཡོདཔ་ཨིན། འཛོལ་བ་འབྱུང་སྲིད་པ་ལ་ — གལ་སྲིད་ཁག་ཆེ་བའི་དོན་ལས་ ངོ་མ་གི་སྒྲ་སྐད་དང་འཕྱད་ཞིབ་འབད་དགོཔ་ཨིན། བཅོས་མའི་བློ་རིག་གི་སྲིད་བྱུས་
བཅུད་དོན་
ཡིག་ཆ་འདི་གི་ AI བཅུད་བསྡུ་ཐོན་ནི་གི་དོན་ལས་ བཅུད་བསྡུ་ ཟེར་བའི་བསྒང་འདི་བསྒང་བསྒ
དྲན་ཐོ་བསྡུ་གསོག...
དྲན་ཤེས་ལ་དྲི་བ་དྲིས་ལན་ཞུ།
ཡིག་ཆ་འདི་གི་སྐོར་ལ་དྲི་བ་ཅི་རིགས་ཞུས་ནའང་ བཅོས་མའི་བློ་རིག་གིས་ འབྲེལ་བ་ཡོད་པའི་དོན་ཚན་ཚུ་ འཚོལ་ཞིབ་ དང་ལན་འདེབས་ འབད་འོང་།