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 정책
요약
요약 을 클릭하여 이 녹음의 AI 요약을 생성합니다.
요약...
이 녹음에 대해 AI에게 물어보기
이 녹음에 대해 질문하십시오 — AI는 관련 섹션을 찾아 답변합니다.