43_outputting_lists_with_ngfor

Jul 13, 2026 07:21 · 3:43 · English · Whisper Turbo · 2 ลำโพง

ใบรับรองนี้หมดอายุในวันนี้ ปรับปรุงสำหรับเก็บข้อมูลถาวร →

ดัชนีการเรียนการสอน

0:02

S… Speaker 2 (43_outputting_lists_with_ngfor)

With all these directives learned,

0:05

S… Speaker 2 (43_outputting_lists_with_ngfor)

let's now have a look at the last built -in directive for now.

0:09

S… Speaker 2 (43_outputting_lists_with_ngfor)

An important one,

0:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

though. It's sad that we can click the Add Server

0:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

button, but we don't actually add servers to our list here,

0:18

S… Speaker 2 (43_outputting_lists_with_ngfor)

right? This list doesn't grow.

0:21

S… Speaker 2 (43_outputting_lists_with_ngfor)

This list is totally static.

0:22

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can change this with the ng4 directive.

0:27

S… Speaker 2 (43_outputting_lists_with_ngfor)

So let's have a look at how it works.

0:29

S… Speaker 2 (43_outputting_lists_with_ngfor)

In our service component here,

0:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

we right now manually add our app server component

0:36

S… Speaker 1 (43_outputting_lists_with_ngfor)

twice.

0:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

It would be nicer to have an array of servers

0:41

S… Speaker 2 (43_outputting_lists_with_ngfor)

which adds it dynamically.

0:42

S… Speaker 2 (43_outputting_lists_with_ngfor)

So in the servers component here,

0:45

S… Speaker 2 (43_outputting_lists_with_ngfor)

I'll add a new property,

0:46

S… Speaker 1 (43_outputting_lists_with_ngfor)

servers,

0:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

and this is an array.

0:49

S… Speaker 2 (43_outputting_lists_with_ngfor)

And here I could have my test server

0:53

S… Speaker 2 (43_outputting_lists_with_ngfor)

and my test server

0:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

too maybe.

0:59

S… Speaker 2 (43_outputting_lists_with_ngfor)

And when we create a new server here,

1:03

S… Speaker 2 (43_outputting_lists_with_ngfor)

I actually want to access this array of servers and

1:07

S… Speaker 2 (43_outputting_lists_with_ngfor)

push a new server on it.

1:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

And this should of course use the server name I set

1:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

up. Now with this,

1:16

S… Speaker 2 (43_outputting_lists_with_ngfor)

I have an array of servers.

1:19

S… Speaker 2 (43_outputting_lists_with_ngfor)

It would now be great if we could replicate the app server

1:23

S… Speaker 2 (43_outputting_lists_with_ngfor)

component as often as needed to have a server for

1:27

S… Speaker 1 (43_outputting_lists_with_ngfor)

each element in the array.

1:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

So two initially and then a new one for each server we add.

1:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can do this.

1:33

S… Speaker 2 (43_outputting_lists_with_ngfor)

I'll get rid of the second app server here.

1:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

And on the first one,

1:38

S… Speaker 2 (43_outputting_lists_with_ngfor)

I will place another directive with a star because this is now also a structural

1:42

S… Speaker 2 (43_outputting_lists_with_ngfor)

directive changing the DOM itself.

1:44

S… Speaker 2 (43_outputting_lists_with_ngfor)

It's the ng4 directive.

1:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

The ng4 base syntax looks like

1:51

S… Speaker 1 (43_outputting_lists_with_ngfor)

this.

1:51

S… Speaker 2 (43_outputting_lists_with_ngfor)

We define a temporary variable for inside a

1:55

S… Speaker 1 (43_outputting_lists_with_ngfor)

loop with let.

1:56

S… Speaker 2 (43_outputting_lists_with_ngfor)

Give it any name you like,

1:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

like server,

1:59

S… Speaker 1 (43_outputting_lists_with_ngfor)

for example.

2:01

S… Speaker 2 (43_outputting_lists_with_ngfor)

And then off servers.

2:05

S… Speaker 2 (43_outputting_lists_with_ngfor)

Servers here is the property we defined in the TypeScript file.

2:10

S… Speaker 2 (43_outputting_lists_with_ngfor)

And this will now loop through all elements in this array and

2:14

S… Speaker 2 (43_outputting_lists_with_ngfor)

assign the individual element to this dynamic server variable.

2:17

S… Speaker 2 (43_outputting_lists_with_ngfor)

So that's just like you might know this loop from a normal,

2:21

S… Speaker 1 (43_outputting_lists_with_ngfor)

well,

2:22

S… Speaker 1 (43_outputting_lists_with_ngfor)

JavaScript code,

2:23

S… Speaker 1 (43_outputting_lists_with_ngfor)

the for -off loop.

2:24

S… Speaker 2 (43_outputting_lists_with_ngfor)

This server variable can now be used in the

2:28

S… Speaker 1 (43_outputting_lists_with_ngfor)

template.

2:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

But here we don't really need it,

2:31

S… Speaker 1 (43_outputting_lists_with_ngfor)

to be honest.

2:32

S… Speaker 2 (43_outputting_lists_with_ngfor)

We will soon learn in the next course section how

2:37

S… Speaker 2 (43_outputting_lists_with_ngfor)

we can pass data to our own components to output it there.

2:40

S… Speaker 2 (43_outputting_lists_with_ngfor)

So for now,

2:41

S… Speaker 2 (43_outputting_lists_with_ngfor)

we won't need that.

2:43

S… Speaker 2 (43_outputting_lists_with_ngfor)

But one thing we should see is that if I save this and we go back to

2:47

S… Speaker 2 (43_outputting_lists_with_ngfor)

our application,

2:48

S… Speaker 2 (43_outputting_lists_with_ngfor)

we still see two because we start with two.

2:50

S… Speaker 2 (43_outputting_lists_with_ngfor)

But if I add more servers,

2:52

S… Speaker 2 (43_outputting_lists_with_ngfor)

you see our list grows and we can click

2:56

S… Speaker 2 (43_outputting_lists_with_ngfor)

this as often as we want.

2:58

S… Speaker 2 (43_outputting_lists_with_ngfor)

Of course, the content of the individual server is still static

3:03

S… Speaker 2 (43_outputting_lists_with_ngfor)

because we can't pass the data like the server

3:07

S… Speaker 2 (43_outputting_lists_with_ngfor)

name to that component.

3:09

S… Speaker 2 (43_outputting_lists_with_ngfor)

But that is something we will learn in the next course section when we dive

3:13

S… Speaker 2 (43_outputting_lists_with_ngfor)

deeper into components and we will learn how we can create our own

3:17

S… Speaker 2 (43_outputting_lists_with_ngfor)

properties on components.

3:19

S… Speaker 2 (43_outputting_lists_with_ngfor)

We can then set from outside a feature which would be great

3:23

S… Speaker 1 (43_outputting_lists_with_ngfor)

to have here.

3:24

S… Speaker 2 (43_outputting_lists_with_ngfor)

So let's dive into this in the next course section.

3:27

S… Speaker 2 (43_outputting_lists_with_ngfor)

Before doing so though,

3:28

S… Speaker 2 (43_outputting_lists_with_ngfor)

let's practice the things we learned in the last lectures and

3:33

S… Speaker 2 (43_outputting_lists_with_ngfor)

then let's also set up our course project.

3:36

S… Speaker 2 (43_outputting_lists_with_ngfor)

before we then dive deeper into components and data binding again.

3:39

S… Speaker 1 (43_outputting_lists_with_ngfor)

So,

3:40

S… Speaker 1 (43_outputting_lists_with_ngfor)

see you there!

ข้อความที่แปลเป็นภาษาอังกฤษนี้ถูกสร้างขึ้นโดย AI (การรับรู้เสียงอัตโนมัติ) อาจมีข้อผิดพลาด - ตรวจสอบกับเสียงต้นฉบับเพื่อใช้อย่างสำคัญ ข้อกำหนด AI

❤️ ชอบ STT.ai ไหม? บอกต่อเพื่อน ๆ ของคุณสิ!

สรุป

คลิกที่ ทำสรุป เพื่อสร้างสรุป AI ของการแปลนี้

ถาม AI เกี่ยวกับการแปลนี้

ถามอะไรก็ได้เกี่ยวกับบทบันทึกนี้ เอไอจะหาส่วนที่เกี่ยวข้องและตอบ

เขียนแปลงอีก