253. Understanding the async Pipe

Jul 21, 2026 05:03 · 4:04 · English · Whisper Turbo · 2 ធុងបាស
អត្ថបទ​នេះ​ផុត​កំណត់​ក្នុង 7 ថ្ងៃ & # 160; ។ ធ្វើ​ឲ្យ​ប្រសើរ​សម្រាប់​ការ​ផ្ទុក​ជា​និច្ច →
លិបិក្រម​ការ​បង្រៀន
បង្ហាញ​តែ
0:02
S… Speaker 1 (253. Understanding the async Pipe)
In this module,
0:03
S… Speaker 2 (253. Understanding the async Pipe)
we learned a lot about pipes,
0:04
S… Speaker 2 (253. Understanding the async Pipe)
what they are,
0:05
S… Speaker 2 (253. Understanding the async Pipe)
how to use them,
0:05
S… Speaker 1 (253. Understanding the async Pipe)
how to parameterize them,
0:06
S… Speaker 1 (253. Understanding the async Pipe)
how to chain them,
0:07
S… Speaker 1 (253. Understanding the async Pipe)
how to create our own pipes,
0:08
S… Speaker 1 (253. Understanding the async Pipe)
and how to maybe create an impure pipe forcing update on
0:12
S… Speaker 1 (253. Understanding the async Pipe)
each data change.
0:13
S… Speaker 1 (253. Understanding the async Pipe)
Now there's one built -in pipe I want to have a closer look at,
0:17
S… Speaker 1 (253. Understanding the async Pipe)
which does something different than all the other pipes.
0:20
S… Speaker 1 (253. Understanding the async Pipe)
It helps us with handling asynchronous data.
0:23
S… Speaker 1 (253. Understanding the async Pipe)
And to demonstrate how this works,
0:25
S… Speaker 1 (253. Understanding the async Pipe)
let's say we have another property right here at the top.
0:30
S… Speaker 2 (253. Understanding the async Pipe)
which says app status or which holds our
0:34
S… Speaker 2 (253. Understanding the async Pipe)
app status,
0:35
S… Speaker 1 (253. Understanding the async Pipe)
which could also be offline,
0:36
S… Speaker 1 (253. Understanding the async Pipe)
critical, whatever.
0:37
S… Speaker 1 (253. Understanding the async Pipe)
But here,
0:38
S… Speaker 1 (253. Understanding the async Pipe)
this will not be a string like offline.
0:41
S… Speaker 1 (253. Understanding the async Pipe)
Instead,
0:42
S… Speaker 1 (253. Understanding the async Pipe)
this should get loaded after,
0:44
S… Speaker 1 (253. Understanding the async Pipe)
let's say, two seconds.
0:45
S… Speaker 1 (253. Understanding the async Pipe)
And to simulate this,
0:46
S… Speaker 1 (253. Understanding the async Pipe)
I will set this equal to a promise.
0:48
S… Speaker 1 (253. Understanding the async Pipe)
And you can imagine this data being returned from a HTTP call
0:52
S… Speaker 1 (253. Understanding the async Pipe)
from a server or something like this.
0:54
S… Speaker 1 (253. Understanding the async Pipe)
So in this promise,
0:56
S… Speaker 1 (253. Understanding the async Pipe)
I will initialize this promise with a callback.
1:00
S… Speaker 1 (253. Understanding the async Pipe)
method passed to the constructor where this method itself takes
1:04
S… Speaker 1 (253. Understanding the async Pipe)
two arguments,
1:04
S… Speaker 1 (253. Understanding the async Pipe)
resolve and reject the two functions we can execute inside of this promise to resolve
1:09
S… Speaker 1 (253. Understanding the async Pipe)
or reject the promise.
1:10
S… Speaker 1 (253. Understanding the async Pipe)
And in the promise,
1:12
S… Speaker 1 (253. Understanding the async Pipe)
in this callback function,
1:13
S… Speaker 1 (253. Understanding the async Pipe)
I will then set up a timeout.
1:15
S… Speaker 1 (253. Understanding the async Pipe)
Let's say it triggers after two seconds,
1:18
S… Speaker 1 (253. Understanding the async Pipe)
so after 2000 milliseconds.
1:20
S… Speaker 1 (253. Understanding the async Pipe)
And then this method here will get executed.
1:23
S… Speaker 1 (253. Understanding the async Pipe)
This method I passed to the setTimeout method.
1:26
S… Speaker 1 (253. Understanding the async Pipe)
Now here in this function,
1:28
S… Speaker 1 (253. Understanding the async Pipe)
I want to simply set my app status.
1:32
S… Speaker 1 (253. Understanding the async Pipe)
So I want to resolve to,
1:35
S… Speaker 1 (253. Understanding the async Pipe)
let's say, stable,
1:36
S… Speaker 1 (253. Understanding the async Pipe)
whatever the status should be.
1:37
S… Speaker 1 (253. Understanding the async Pipe)
So what this will do is it will set app status to stable,
1:42
S… Speaker 1 (253. Understanding the async Pipe)
but only after two seconds.
1:44
S… Speaker 1 (253. Understanding the async Pipe)
So if we try to output this app status here,
1:47
S… Speaker 1 (253. Understanding the async Pipe)
let's add a line break or another line break to have a blank line
1:51
S… Speaker 1 (253. Understanding the async Pipe)
in between.
1:52
S… Speaker 1 (253. Understanding the async Pipe)
And then a heading where I say app status.
1:55
S… Speaker 1 (253. Understanding the async Pipe)
And then I try to output app status with string interpolation.
1:59
S… Speaker 2 (253. Understanding the async Pipe)
If we do this,
2:00
S… Speaker 2 (253. Understanding the async Pipe)
you see object object.
2:02
S… Speaker 1 (253. Understanding the async Pipe)
And this is correct because it is an object.
2:04
S… Speaker 1 (253. Understanding the async Pipe)
It's a promise and a promise is an object.
2:06
S… Speaker 1 (253. Understanding the async Pipe)
But after two seconds,
2:08
S… Speaker 1 (253. Understanding the async Pipe)
we know that this is no longer an object.
2:12
S… Speaker 1 (253. Understanding the async Pipe)
It now is a string.
2:13
S… Speaker 1 (253. Understanding the async Pipe)
But Angular doesn't know because it doesn't watch our object.
2:17
S… Speaker 1 (253. Understanding the async Pipe)
It doesn't see if this object actually transforms to
2:21
S… Speaker 1 (253. Understanding the async Pipe)
something else or if this returns us a value.
2:24
S… Speaker 1 (253. Understanding the async Pipe)
It just knows it's a promise,
2:26
S… Speaker 1 (253. Understanding the async Pipe)
I'm done.
2:26
S… Speaker 1 (253. Understanding the async Pipe)
And it's good that it behaves like this,
2:29
S… Speaker 1 (253. Understanding the async Pipe)
saves us performance.
2:30
S… Speaker 1 (253. Understanding the async Pipe)
We should be explicit about how our app behaves.
2:33
S… Speaker 1 (253. Understanding the async Pipe)
But thankfully,
2:34
S… Speaker 1 (253. Understanding the async Pipe)
there is a nice little pipe we can use here to
2:38
S… Speaker 1 (253. Understanding the async Pipe)
make the transformation of this data easier.
2:43
S… Speaker 1 (253. Understanding the async Pipe)
We know that it will be a string after two seconds.
2:45
S… Speaker 1 (253. Understanding the async Pipe)
And we want to output this string.
2:47
S… Speaker 1 (253. Understanding the async Pipe)
Or it will resolve a string after two seconds,
2:50
S… Speaker 1 (253. Understanding the async Pipe)
I should say.
2:51
S… Speaker 1 (253. Understanding the async Pipe)
And we want to output the string.
2:52
S… Speaker 1 (253. Understanding the async Pipe)
So we can add the pipe symbol and then async.
2:56
S… Speaker 1 (253. Understanding the async Pipe)
This is a built -in pipe.
2:58
S… Speaker 1 (253. Understanding the async Pipe)
And by adding it,
3:00
S… Speaker 1 (253. Understanding the async Pipe)
well,
3:01
S… Speaker 2 (253. Understanding the async Pipe)
watch for yourself.
3:02
S… Speaker 2 (253. Understanding the async Pipe)
You see,
3:04
S… Speaker 2 (253. Understanding the async Pipe)
I will reload the app.
3:06
S… Speaker 1 (253. Understanding the async Pipe)
There's nothing there at the beginning.
3:08
S… Speaker 1 (253. Understanding the async Pipe)
But after two seconds,
3:10
S… Speaker 2 (253. Understanding the async Pipe)
you see stable.
3:11
S… Speaker 1 (253. Understanding the async Pipe)
And this is what async does.
3:13
S… Speaker 1 (253. Understanding the async Pipe)
It recognizes that this is a promise.
3:16
S… Speaker 1 (253. Understanding the async Pipe)
And as a side note,
3:17
S… Speaker 2 (253. Understanding the async Pipe)
it would also work with observables.
3:20
S… Speaker 1 (253. Understanding the async Pipe)
There it would subscribe automatically.
3:22
S… Speaker 1 (253. Understanding the async Pipe)
And after two seconds,
3:25
S… Speaker 1 (253. Understanding the async Pipe)
It will simply recognize that something changed,
3:29
S… Speaker 1 (253. Understanding the async Pipe)
that the promise resolved,
3:30
S… Speaker 1 (253. Understanding the async Pipe)
or in the case of an observable,
3:32
S… Speaker 1 (253. Understanding the async Pipe)
that data was sent through the subscription,
3:34
S… Speaker 1 (253. Understanding the async Pipe)
and it will print this data to the screen.
3:38
S… Speaker 1 (253. Understanding the async Pipe)
And this is the pipe with which I want to conclude this
3:42
S… Speaker 1 (253. Understanding the async Pipe)
section about pipes.
3:43
S… Speaker 1 (253. Understanding the async Pipe)
Now you should feel really comfortable about using them,
3:47
S… Speaker 1 (253. Understanding the async Pipe)
building your own pipes.
3:49
S… Speaker 1 (253. Understanding the async Pipe)
and as you see here,
3:50
S… Speaker 1 (253. Understanding the async Pipe)
working with async data with pipes.
3:52
S… Speaker 1 (253. Understanding the async Pipe)
Now we will see this async pipe being used in the HTTP section later,
3:57
S… Speaker 1 (253. Understanding the async Pipe)
but for now,
3:58
S… Speaker 1 (253. Understanding the async Pipe)
let's move on to some exercises regarding pipes.

អត្ថបទ​នេះ​ត្រូវ​បាន​បង្កើត​ដោយ AI (ការ​ទទួល​ស្គាល់​ការ​និយាយ​ស្វ័យប្រវត្តិ) & # 160; ។ វា​អាច​មាន​កំហុស - ពិនិត្យ​មើល​អូឌីយ៉ូ​ដើម​សម្រាប់​ការ​ប្រើ​សំខាន់ & # 160; ។ គោលការណ៍ AI

❤️ ស្រឡាញ់ STT.ai? ប្រាប់មិត្តភក្តិរបស់អ្នក!
សេចក្ដី​សង្ខេប
ចុច សង្ខេប ដើម្បី​បង្កើត​សេចក្ដី​សង្ខេប AI នៃ​ការ​បកប្រែ​នេះ & # 160; ។
កំពុង​សង្ខេប...
សំណួរ AI អំពី​ការ​បកប្រែ​នេះ
សំណួរអ្វីមួយអំពីការបកប្រែនេះ - AI នឹងរកឃើញផ្នែកដែលទាក់ទងនិងឆ្លើយតប។
បម្លែង​ជា​សំឡេង​ផ្សេង​ទៀត