263. Outputting Posts

Jul 21, 2026 06:04 · 2:15 · English · Whisper Turbo · 2 ஒலிப்பேழைகள்
இந்த நகல் காலாவதியாகும் 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 (தானியங்கி பேச்சு அடையாளம்) மூலம் உருவாக்கப்பட்டது. பிழைகள் இருக்கலாம் - முக்கியமான பயன்பாட்டுக்கு மூல ஒலியை சரிபார்க்கவும். AI கொள்கை

❤️ STT.ai ஐ நேசிக்கிறீர்களா? உங்கள் நண்பர்களுக்குச் சொல்லுங்கள்!
சுருக்கம்
இந்த நகலெடுப்புக்கான AI சுருக்கத்தை உருவாக்க சுருக்கம் என்பதை க்ளிக் செய்யவும்.
சுருக்கப்படுகிறது...
இந்த நகலை AI க்குக் கேட்கவும்
இந்த நூலைப் பற்றி ஏதாவது கேட்கவும் - AI தொடர்புடைய பகுதிகளைக் கண்டுபிடித்து பதிலளிக்கும்.
மற்றொன்றை மாற்று