124. Using Services for Pushing Data from A to B

Jul 15, 2026 05:15 · 3:08 · English · Whisper Turbo · 2 المتكلمون

تنتهي صلاحية هذا النص اليوم. تحسين التخزين الدائم →

فهرس المحاضرات

0:02

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

In the last lecture,

0:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we basically finished our shopping list service,

0:05

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

but here's one thing which is not working.

0:08

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I can click this Add button as often as I want.

0:11

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I don't get an error,

0:12

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

but I also don't see it getting added to this list.

0:15

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

The reason for this is that when

0:19

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we call Get Ingredients,

0:21

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

which we of course do to populate this list,

0:24

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we only get a slice of the ingredients array,

0:27

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

so we get a copy.

0:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

Therefore, once we add a new ingredient,

0:31

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

which you of course don't add to the copy but to the original array,

0:35

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

that is not reflected in our components where we only have that

0:39

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

copy to work with.

0:40

S… Speaker 2 (124. Using Services for Pushing Data from A to B)

Now,

0:42

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

there are a couple of ways of solving this.

0:44

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

For the easiest solution,

0:46

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

you could remove slice and that's not necessarily bad.

0:49

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

You would then simply return the original array.

0:52

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And if you are sure you don't accidentally edit it somewhere,

0:56

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

this might not be wrong.

0:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I choose this approach here,

1:00

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

though, because I want to show you a different solution.

1:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

We basically have to inform our component

1:07

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

that new data is available.

1:09

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So I will simply add a new event

1:13

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

emitter here,

1:14

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and I'll name it ingredients changed,

1:18

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and I'll set this to,

1:20

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

or I'll,

1:21

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

of course, set this to a new event emitter to be imported from at

1:25

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

AngularCore.

1:26

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

This event emitter now,

1:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

can emit our ingredient array.

1:33

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So the type it will pass on is an array of ingredients.

1:36

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And now here,

1:38

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

whenever we change this array,

1:40

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

we simply call this ingredients changed and

1:45

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

emit a new event.

1:47

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And we of course pass a value here,

1:51

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

our original ingredients array,

1:53

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

though to be precise,

1:55

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

again, only a copy of it.

1:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now we always have the right ingredients

2:02

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

array in the service and we inform other interested

2:06

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

components about that change in the event we're emitting here.

2:10

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now in the shopping list component,

2:13

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

besides getting the ingredients at that point of time we load

2:17

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

the app,

2:18

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I also want to reach out to my shopping list service and

2:22

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

simply subscribe to that ingredients changed event.

2:27

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

So now whenever ingredients change,

2:29

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I know that I will get them.

2:31

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

This will be of type ingredient array here as we learned.

2:34

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And now I can use them here in the body of this anonymous function

2:39

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

I'm passing to subscribe.

2:40

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And here I can now simply set this

2:44

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

ingredients equal to the ingredients I got here.

2:48

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

And with this change in place,

2:50

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now if we let the application reload here

2:54

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

and go to shopping list and now I add bread and

2:58

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now you see it gets added here again without any issues because

3:03

S… Speaker 1 (124. Using Services for Pushing Data from A to B)

now we're getting informed that something changed.

هذا النص تم إنتاجه بواسطة AI (التعرف الآلي على الكلام). قد يحتوي على أخطاء - التحقق من الصوت الأصلي للاستخدام الحرج. سياسة الذكاء الاصطناعي

❤️ هل تحب STT.ai؟ أخبر أصدقاءك!

موجز تنفيذي

انقر على ملخص لإنشاء ملخص للذكاء الاصطناعي لهذا النص.

اسأل AI عن هذا النص

وإذا سألت عن أي شيء في هذا النص، سيجد المحقق الخاص الأقسام ذات الصلة ويجيبك.

تفريغ آخر