263. Outputting Posts

Jul 21, 2026 06:04 · 2:15 · English · Whisper Turbo · 2 Oradores
Esta transcrição expira em 7 dias. Atualização para armazenamento permanente →
Índice de Lecções
A mostrar apenas
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.

Essa transcrição foi gerada pela IA (reconhecimento automático de fala). Pode conter erros — verificar contra o áudio original para uso crítico. Política de IA

❤️ Adora o STT.ai? Conte aos seus amigos!
Resumo
Clique em Summarize para gerar um resumo de IA desta transcrição.
Resumindo...
Pergunte à IA sobre este Transcrito
Pergunte qualquer coisa sobre esta transcrição — a IA vai encontrar seções relevantes e resposta.
Transcrição Outro