1
00:00:00,000 --> 00:00:07,225
الآن بعد أن قمنا بفحص ربط البيانات،

2
00:00:07,225 --> 00:00:10,275
دعونا نستخدمها

3
00:00:10,275 --> 00:00:14,715
للعمل على تطبيق Angular الذي كنا نستخدمه حتى الآن.

4
00:00:14,715 --> 00:00:17,504
في الإصدار السابق من تطبيق Angular،

5
00:00:17,504 --> 00:00:20,190
كان لدينا القائمة التي يتم تقديمها،

6
00:00:20,190 --> 00:00:24,655
ثم كان لدينا طبق معين يتم عرضه في الأسفل.

7
00:00:24,655 --> 00:00:28,770
الآن، نود بشكل مثالي أن يتمكن المستخدم من النقر

8
00:00:28,770 --> 00:00:32,990
على أي عنصر من عناصر القائمة ثم التفاصيل التي سيتم عرضها للمستخدم.

9
00:00:32,990 --> 00:00:37,325
هذا هو المكان الذي سيساعدنا فيه استخدام ربط البيانات

10
00:00:37,325 --> 00:00:43,430
على تنفيذ تطبيقنا لتمكين هذا النوع من الميزة.

11
00:00:43,430 --> 00:00:48,470
الذهاب إلى الحالة الحالية لتطبيقنا في المتصفح،

12
00:00:48,470 --> 00:00:52,040
يمكننا الآن أن نرى أن لدينا القائمة لدينا وفي الجزء السفلي

13
00:00:52,040 --> 00:00:56,370
لدينا تفاصيل طبق معين واحد يتم عرضه هناك.

14
00:00:56,370 --> 00:01:01,625
الآن، هذا جيد وجيد لبداية، ولكن من الناحية المثالية،

15
00:01:01,625 --> 00:01:06,350
ما نود أن يكون هو أنه إذا نقر المستخدم على أي واحد من هذه الأطباق،

16
00:01:06,350 --> 00:01:12,585
ونحن نريد أن تكون قادرة على إظهار تفاصيل الطبق في الجزء السفلي من القائمة هنا.

17
00:01:12,585 --> 00:01:17,165
لذلك، نود أن يتم تغيير تفاصيل الطبق على

18
00:01:17,165 --> 00:01:22,250
أساس أي طبق معين نضغط عليه في أي لحظة.

19
00:01:22,250 --> 00:01:24,100
إذن، كيف يمكننا تحقيق ذلك؟

20
00:01:24,100 --> 00:01:28,355
لذا، هذا هو المكان الذي يأتي فيه استخدام ربط البيانات لإنقاذنا.

21
00:01:28,355 --> 00:01:31,735
الذهاب إلى تطبيقنا،

22
00:01:31,735 --> 00:01:35,750
أول شيء سأقوم به هو في المجلد المشترك،

23
00:01:35,750 --> 00:01:39,800
والآن أنت تدرك أن معلومات الطبق يتم

24
00:01:39,800 --> 00:01:45,090
استخدامها في مكون القائمة وكذلك في مكون تفاصيل الطبق.

25
00:01:45,090 --> 00:01:49,100
الآن، عندما يكون لديك معلومات يتم مشاركتها مثل هذه،

26
00:01:49,100 --> 00:01:53,120
سيكون من الأنسب أن يكون لديك مكان مركزي

27
00:01:53,120 --> 00:01:57,170
يتم من خلاله توفير هذه المعلومات لكل من هذين المكونين.

28
00:01:57,170 --> 00:01:58,880
لذا لمساعدتي في القيام بذلك،

29
00:01:58,880 --> 00:02:03,470
ما سأقوم به هو الذهاب إلى مجلد المشاركة ثم إنشاء ملف جديد، ومن

30
00:02:03,470 --> 00:02:09,150
ثم سأقوم بتسمية هذا الملف على أنه dishes.ts.

31
00:02:09,150 --> 00:02:11,540
داخل هذا الملف dishes.ts،

32
00:02:11,540 --> 00:02:16,840
سأقوم بإنشاء الثابت الذي يزود تفاصيل الأطباق.

33
00:02:16,840 --> 00:02:17,980
لذلك للقيام بذلك،

34
00:02:17,980 --> 00:02:27,380
أود أولا استيراد الطبق،

35
00:02:27,380 --> 00:02:34,400
من فئة الطبق

36
00:02:34,400 --> 00:02:36,760
التي قمت بتحديدها بالفعل في وقت سابق.

37
00:02:36,760 --> 00:02:40,625
حتى الآن، يمكنني تحديد

38
00:02:40,625 --> 00:02:48,230
ثابت يسمى كأطباق من نوع صفيف الأطباق،

39
00:02:48,230 --> 00:02:53,590
ومن ثم هذا هو المكان الذي سأقوم بتخزين تفاصيل جميع أطباقي.

40
00:02:53,590 --> 00:02:56,495
الآن، في الإصدار السابق من التطبيق،

41
00:02:56,495 --> 00:03:00,500
رأينا استخدام الأطباق ورأينا

42
00:03:00,500 --> 00:03:04,610
مصفوفة كائن جافا سكريبت التي تحتوي على تفاصيل الأطباق.

43
00:03:04,610 --> 00:03:09,830
الآن، نحن ذاهبون لنقل كل هذا المحتوى ومع نسخة محدثة منه.

44
00:03:09,830 --> 00:03:12,485
لذلك،

45
00:03:12,485 --> 00:03:16,520
يتم إعطاء نسخة محدثة من صفيف كائن جافا سكريبت الأطباق لك في التعليمات،

46
00:03:16,520 --> 00:03:18,065
لذلك فقط اذهب ونسخ

47
00:03:18,065 --> 00:03:22,760
مصفوفة كائن جافا سكريبت بأكملها من هناك ومن ثم سنقوم لصقها في مكانها هنا.

48
00:03:22,760 --> 00:03:25,625
لذلك، يصبح هذا الموقع المركزي الذي

49
00:03:25,625 --> 00:03:30,215
يتم توفير معلومات الأطباق إلى التطبيق الخاص بك.

50
00:03:30,215 --> 00:03:34,610
لقد قمت الآن بقطع ولصق تفاصيل

51
00:03:34,610 --> 00:03:39,770
الطبق التي ترد في تعليمات التمرين في مكانها هنا،

52
00:03:39,770 --> 00:03:43,640
ولذلك لدي أربعة أطباق تم لصقها هنا واحد،

53
00:03:43,640 --> 00:03:46,030
اثنان، وأربعة أطباق تم لصقها هنا،

54
00:03:46,030 --> 00:03:48,710
وكل من تلك الأطباق يحتوي بالطبع على

55
00:03:48,710 --> 00:03:52,560
تفاصيل الطبق المحدد وأيضا تعليقات على الطبق.

56
00:03:52,560 --> 00:03:55,610
الآن بهذه الطريقة

57
00:03:55,610 --> 00:04:02,360
يصبح تقديم المعلومات في قالب تفاصيل الطبق واضحًا لأي واحد من هذه الأطباق المختارة.

58
00:04:02,360 --> 00:04:09,130
الآن، إذا كنت التراجع سترى أن هناك بعض الخطوط الحمراء هنا.

59
00:04:09,130 --> 00:04:16,700
السبب في هذه الخطوط الحمراء هو أنه عندما تنظر إلى كائن الطبق هنا،

60
00:04:16,700 --> 00:04:23,210
سترى أنه في كائن الطبق ليس لدينا خاصية هناك تسمى التعليقات.

61
00:04:23,210 --> 00:04:26,060
لذلك، نحن بحاجة إلى إنشاء خاصية جديدة تسمى

62
00:04:26,060 --> 00:04:30,480
التعليقات لإضافتها إلى هذا الطبق هنا. إذاً، كيف نفعل ذلك؟

63
00:04:30,480 --> 00:04:35,060
لذلك للقيام بذلك، سوف نقول تعليقات

64
00:04:35,060 --> 00:04:41,275
وبعد ذلك أود أن أقول مجموعة التعليقات هنا.

65
00:04:41,275 --> 00:04:47,690
الآن على الفور تدرك أنه لا يوجد مصفوفة تعليق متاحة لنا،

66
00:04:47,690 --> 00:04:50,495
لذلك نحن بحاجة إلى إنشاء مصفوفة التعليقات هذه.

67
00:04:50,495 --> 00:04:54,605
لذا، ما سأقوم به هو أنني سأقوم بإنشاء فئة JavaScript أخرى

68
00:04:54,605 --> 00:04:59,090
تحتوي على تفاصيل التعليق هناك.

69
00:04:59,090 --> 00:05:17,340
لذلك للقيام بذلك، أولا سوف استيراد تعليق

70
00:05:17,340 --> 00:05:20,750
من فئة التعليق هنا.

71
00:05:20,750 --> 00:05:25,435
الآن بالطبع الخط الأحمر يخبرني على الفور أنه ليس لدي فصل تعليق.

72
00:05:25,435 --> 00:05:27,375
لذا، كيف نضيف فئة تعليق؟

73
00:05:27,375 --> 00:05:29,500
حتى الذهاب إلى المجلد المشترك،

74
00:05:29,500 --> 00:05:37,940
سنقوم بإنشاء ملف جديد باسم comment.ts وداخل هذا التعليق.ts،

75
00:05:37,940 --> 00:05:48,250
سنقوم بتحديد فئة تسمى التعليق هنا.

76
00:05:50,300 --> 00:05:55,695
الآن، نحن بحاجة إلى تحديد خصائص معينة لفئة التعليق هذه.

77
00:05:55,695 --> 00:05:57,605
إذن، ما هي الخصائص التي لدينا؟

78
00:05:57,605 --> 00:06:00,890
دعونا نلقي نظرة سريعة على ملف dishes.ts الخاص بنا

79
00:06:00,890 --> 00:06:05,310
ومن ثم سنرى ما هي خصائص كل تعليق.

80
00:06:06,170 --> 00:06:09,085
الذهاب إلى ملف dishes.ts،

81
00:06:09,085 --> 00:06:11,555
ترى أن التعليقات تحتوي على

82
00:06:11,555 --> 00:06:15,470
خاصية واحدة تسمى كتصنيف يبدو أنه رقم،

83
00:06:15,470 --> 00:06:18,110
ثم لديك تعليق وهو سلسلة

84
00:06:18,110 --> 00:06:21,490
ومؤلف وهو عبارة عن سلسلة وتاريخ وهو أيضًا سلسلة.

85
00:06:21,490 --> 00:06:26,690
لذلك، نحن بحاجة إلى تحديد أربعة خصائص لفئة التعليق الخاصة بي هنا.

86
00:06:26,690 --> 00:06:30,075
لذا، بالعودة إلى فئة التعليق،

87
00:06:30,075 --> 00:06:34,770
سأعرّف التصنيف كرقم.

88
00:06:34,770 --> 00:06:37,410
لذلك، في نوع البرنامج النصي،

89
00:06:37,410 --> 00:06:47,575
كل شيء هو رقم هنا ثم كان لدينا تعليق وهو مؤلف سلسلة،

90
00:06:47,575 --> 00:06:49,480
وهو أيضا سلسلة،

91
00:06:49,480 --> 00:06:56,500
ومن ثم التاريخ الذي هو أيضا سلسلة هنا.

92
00:06:56,500 --> 00:07:01,130
لذا، هذه هي الخصائص الأربعة التي لدينا هنا.

93
00:07:01,130 --> 00:07:09,620
الآن، من الواضح أننا رأينا كيف نستخدم سلسلة التاريخ

94
00:07:09,620 --> 00:07:13,040
في التمرين السابق، وفي المهمة كيف استخدمنا

95
00:07:13,040 --> 00:07:17,410
سلسلة التاريخ لإظهار تاريخ التعليق هناك.

96
00:07:17,410 --> 00:07:19,755
الآن، في حال كنت تتساءل،

97
00:07:19,755 --> 00:07:22,540
ماذا تحتوي سلسلة التاريخ هذه بالفعل؟

98
00:07:22,540 --> 00:07:28,260
الذهاب هنا، سترى أن سلسلة التاريخ هذه بتنسيق معين.

99
00:07:28,260 --> 00:07:32,165
لذلك، هذا هو التنسيق القياسي لتخزين تاريخ هنا.

100
00:07:32,165 --> 00:07:38,230
تنسيق التاريخ هذا هو طريقة ISO OSI لتحديد تنسيق التاريخ.

101
00:07:38,230 --> 00:07:39,775
لذلك، نحن فقط ذاهبون لاستخدام هذا،

102
00:07:39,775 --> 00:07:42,670
لذلك هذا هو تنسيق موحد الذي يستخدم أيضا في

103
00:07:42,670 --> 00:07:48,430
العديد من لغات البرمجة التي تسمح لك لتخزين البيانات كسلسلة هنا،

104
00:07:48,430 --> 00:07:51,500
لذلك أنا ذاهب فقط للاستفادة من ذلك على هذا النحو هنا.

105
00:07:51,500 --> 00:07:55,405
بعد إجراء التغييرات على

106
00:07:55,405 --> 00:08:02,230
ملف dish.ts مثل هذا هنا ثم إضافة في فئة التعليق هنا،

107
00:08:02,230 --> 00:08:08,420
نرى الآن أن ملف dishes.ts لم يعد يحتوي على تلك الخطوط الحمراء لأنه

108
00:08:08,420 --> 00:08:18,325
تمت إضافة التعليق في كمصفوفة كائن إلى فئة الطبق الخاصة بي هنا.

109
00:08:18,325 --> 00:08:22,470
لذلك، هذا يعمل بشكل جيد حتى الآن.

110
00:08:22,470 --> 00:08:24,530
الآن، كيف نستفيد من هذا؟

111
00:08:24,530 --> 00:08:25,935
الآن للاستفادة من هذا،

112
00:08:25,935 --> 00:08:28,755
سوف نذهب إلى عنصر القائمة t.ts،

113
00:08:28,755 --> 00:08:32,050
ثم هنا لدينا هذا الثابت المحدد هنا.

114
00:08:32,050 --> 00:08:34,760
الآن، هذه ليست الطريقة الصحيحة للقيام بذلك

115
00:08:34,760 --> 00:08:38,845
في وقت لاحق سترى لي باستخدام خدمة لكل هذا.

116
00:08:38,845 --> 00:08:49,075
لذلك، اسمحوا لي أن قطع هذا الثابت من هنا تماما وبدلا من استخدام هذا الثابت،

117
00:08:49,075 --> 00:08:54,880
وأنا ذاهب الآن لاستيراد أطباق

118
00:08:54,880 --> 00:09:01,600
من المجلد المشترك

119
00:09:01,600 --> 00:09:07,225
هنا، أطباق مشتركة هنا.

120
00:09:07,225 --> 00:09:12,875
لذلك، لاحظ أن مجلد الأطباق هذا يقوم بتصدير الأطباق الثابتة هنا.

121
00:09:12,875 --> 00:09:17,250
لذلك، هذا هو السبب في أننا قادرون على الاستفادة منه.

122
00:09:17,250 --> 00:09:20,080
لذا بالعودة إلى الأطباق الأولى هنا،

123
00:09:20,080 --> 00:09:22,600
أحتاج لتصدير هذا من هنا،

124
00:09:22,600 --> 00:09:25,500
لذا سأقول التصدير.

125
00:09:25,500 --> 00:09:28,285
ثابت. لذلك، عندما أفعل ذلك،

126
00:09:28,285 --> 00:09:33,985
ثم في عنصر القائمة بلدي أستطيع أن أرى أن أطباقي يمكن استيرادها هنا بشكل صحيح.

127
00:09:33,985 --> 00:09:40,150
ثم، فإن بقية التعليمات البرمجية هنا تعمل على ما يرام دون أي تغييرات.

128
00:09:40,500 --> 00:09:46,190
سترى أنه إذا قمت بحفظ القيم الآن

129
00:09:46,190 --> 00:09:51,190
وبعد ذلك نظرت إلى تطبيق الويب الخاص بك في المتصفح،

130
00:09:51,190 --> 00:09:55,655
فإنه سيتم تقديم على ما يرام حتى بعد هذه التغييرات.

131
00:09:55,655 --> 00:10:00,110
بعد حفظ جميع التغييرات التي قمت بها حتى الآن في جميع الملفات،

132
00:10:00,110 --> 00:10:01,810
إذا ذهبت ونظرت إلى صفحة الويب الخاصة بك،

133
00:10:01,810 --> 00:10:05,360
صفحة الويب الخاصة بك تعرض تماما كما كان من قبل.

134
00:10:05,360 --> 00:10:09,025
الآن، الجزء الثاني من المشكلة.

135
00:10:09,025 --> 00:10:11,390
نريد أن نكون قادرين على التواصل

136
00:10:11,390 --> 00:10:15,640
عندما نضغط على أي من عناصر القائمة هذه،

137
00:10:15,640 --> 00:10:18,415
نريد أن نكون قادرين على إيصال تلك المعلومات بحيث

138
00:10:18,415 --> 00:10:21,640
يتم تقديم الطبق المقابل هنا.

139
00:10:21,640 --> 00:10:23,620
لذا، هذا هو المكان الذي سنأخذ فيه مساعدة

140
00:10:23,620 --> 00:10:27,100
ربط البيانات التي تعلمناها حتى الآن.

141
00:10:27,100 --> 00:10:33,505
بالعودة إلى ملف قالب مكونات القائمة،

142
00:10:33,505 --> 00:10:36,600
ما سنقوم به هو أن

143
00:10:36,600 --> 00:10:41,675
هذا «التطبيق dishdetaille» الذي تقوم بتضمينه

144
00:10:41,675 --> 00:10:48,570
في الأسفل هنا، لإضافة قالب مكونات تفاصيل الطبق إلى قالب مكونات القائمة،

145
00:10:48,570 --> 00:10:53,440
سنقوم بإضافة في خاصية تسمى الطبق.

146
00:10:53,440 --> 00:10:59,520
ثم، سنقوم بتعيين هذا ليكون «محدددديش».

147
00:10:59,520 --> 00:11:03,550
تذكر أن الطبق المحدد هو متغير قمنا

148
00:11:03,550 --> 00:11:08,385
بتعريفه في ملف مكونات القائمة TypeScript هنا.

149
00:11:08,385 --> 00:11:12,020
لذلك، بهذه الطريقة؛

150
00:11:12,020 --> 00:11:15,905
سيتم تمرير هذه القيمة من هذا الطبق المحدد من خلال هذا الطبق الملكية هنا.

151
00:11:15,905 --> 00:11:20,860
الآن، سنرى كيف يمكن لمكون تفاصيل الطبق استرداد هذه المعلومات

152
00:11:20,860 --> 00:11:25,670
ومن ثم الاستفادة منها بشكل جيد في الخطوة التالية في التمرين.

153
00:11:25,670 --> 00:11:27,655
الآن، بينما نحن هنا،

154
00:11:27,655 --> 00:11:33,345
سنقوم أيضا بإصلاح القضية الأخرى التي يجب أن نتعامل معها.

155
00:11:33,345 --> 00:11:40,155
بمعنى، عندما يتم النقر على أي من عناصر القائمة،

156
00:11:40,155 --> 00:11:44,215
فإنه سيتم إنشاء حدث نقرة ونريد أن

157
00:11:44,215 --> 00:11:49,475
يتم تسليم هذه المعلومات إلى ملف TypeScript مكون القائمة لدينا.

158
00:11:49,475 --> 00:11:56,960
لذلك، للقيام بذلك، سنذهب إلى قوائم شبكة القائمة التي حددناها هنا.

159
00:11:56,960 --> 00:11:59,395
لهذا البلاط الشبكة هنا،

160
00:11:59,395 --> 00:12:04,945
ما سأقوم به هو تحديد حدث النقر هنا.

161
00:12:04,945 --> 00:12:06,910
لذلك، بالنسبة لحدث النقر،

162
00:12:06,910 --> 00:12:11,870
ما سأقوم به هو أنني ذاهب لاستدعاء

163
00:12:11,870 --> 00:12:19,005
طريقة محددة سأحدد داخل ملف component.ts القائمة الخاص بي.

164
00:12:19,005 --> 00:12:20,880
إلى هذه الطريقة onSelect،

165
00:12:20,880 --> 00:12:25,975
سأقوم بتزويد الطبق كمعلمة هنا.

166
00:12:25,975 --> 00:12:27,315
ما هذا الطبق؟

167
00:12:27,315 --> 00:12:30,670
هذا الطبق هو بالضبط هذا الطبق الذي اخترته في

168
00:12:30,670 --> 00:12:35,785
هذا «السماح طبق من الأطباق» في بناء الجملة ngFor هنا.

169
00:12:35,785 --> 00:12:41,390
لذا،

170
00:12:41,390 --> 00:12:45,980
سيتم تمرير هذا الطبق المحدد، من مجموعة الأطباق التي اخترتها هنا، كمعلمة لهذه الطريقة onSelect،

171
00:12:45,980 --> 00:12:50,555
ما سنقوم بتنفيذه في ملف component.ts القائمة.

172
00:12:50,555 --> 00:12:52,465
لذلك، الآن بعد أن قمنا بذلك،

173
00:12:52,465 --> 00:12:56,175
لذلك هذا هو المعالج الذي يحتاج إلى تنفيذه.

174
00:12:56,175 --> 00:12:59,960
دعونا نذهب إلى ملف مكون القائمة ثم إصلاح

175
00:12:59,960 --> 00:13:04,195
هذا الملف لتنفيذ هذا المعالج هناك.

176
00:13:04,195 --> 00:13:08,490
لذلك، عندما تقوم بالنقر فوق أي عنصر من عناصر القائمة،

177
00:13:08,490 --> 00:13:10,695
فسيتم استدعاء المقبض المقابل

178
00:13:10,695 --> 00:13:15,605
وسيتم تمرير معلومات الطبق المحددة كمعلمة هنا.

179
00:13:15,605 --> 00:13:19,790
الذهاب إلى ملف مكون القائمة t.ts، الآن،

180
00:13:19,790 --> 00:13:25,545
سيتم تعيين الطبق المحدد قيمة على أساس الطبق الذي أختار.

181
00:13:25,545 --> 00:13:29,600
لذلك، أنا ذاهب لإزالة هذا الجزء ثم الحق أدناه هنا،

182
00:13:29,600 --> 00:13:34,660
وأنا ذاهب لتنفيذ طريقة أونسيليكت هنا.

183
00:13:34,660 --> 00:13:37,715
لذلك، بالنسبة لطريقة onSelect،

184
00:13:37,715 --> 00:13:45,525
سيحصل هذا على معلمة هي معلمة الطبق.

185
00:13:45,525 --> 00:13:47,820
عندما تأتي معلمة الطبق هذه،

186
00:13:47,820 --> 00:13:55,705
سأقوم بتعيين هذا المحددDish يساوي الطبق،

187
00:13:55,705 --> 00:14:02,420
المعلمة التي جاءت كقيمة لطريقة onSelect هنا.

188
00:14:02,420 --> 00:14:03,895
لذا، هذا هو.

189
00:14:03,895 --> 00:14:08,410
لذلك، عند النقر على أي واحد من تلك العناصر في القائمة،

190
00:14:08,410 --> 00:14:10,780
أي واحد من الأطباق في القائمة،

191
00:14:10,780 --> 00:14:15,090
سيتم تمرير معلومات الطبق من خلال هذا ومن ثم

192
00:14:15,090 --> 00:14:20,670
سيتم تعيين الطبق المحدد لهذا الكائن الطبق هنا.

193
00:14:20,670 --> 00:14:25,415
الآن، لدينا كيف تأتي المعلومات من DOM.

194
00:14:25,415 --> 00:14:29,280
ستؤدي النقرة المحددة

195
00:14:29,280 --> 00:14:33,875
إلى إتاحة معلومات الطبق لنا وسيتم تعيين هذه القيمة للطبق المحدد.

196
00:14:33,875 --> 00:14:38,755
الآن، والعودة إلى ملف HTML مكون القائمة،

197
00:14:38,755 --> 00:14:45,240
نرى أننا قد قمنا بالفعل بتعيين هذه الخاصية الطبق لتحديدديش.

198
00:14:45,240 --> 00:14:48,730
لذا، بهذه الطريقة، يتم تمرير قيمة الطبق المحددة

199
00:14:48,730 --> 00:14:53,980
من خلال خاصية الطبق هذه إلى هذا التطبيق dishdetaille هنا.

200
00:14:53,980 --> 00:14:57,990
الآن، كيف يمكن لمكون تفاصيل الطبق الخاص بي الحصول على هذه المعلومات؟

201
00:14:57,990 --> 00:15:02,225
لذلك، نحن ذاهبون للذهاب إلى عنصر تفاصيل الطبق وإصلاح ذلك.

202
00:15:02,225 --> 00:15:05,185
الذهاب إلى مكون تفاصيل الطبق،

203
00:15:05,185 --> 00:15:08,395
أول شيء سأقوم به هو حذف

204
00:15:08,395 --> 00:15:13,370
هذا الطبق الثابت من مكون تفاصيل الطبق الخاص بي.

205
00:15:13,370 --> 00:15:14,985
أنا لم أعد بحاجة إليها.

206
00:15:14,985 --> 00:15:18,490
الآن، عندما يتم ربط خاصية،

207
00:15:18,490 --> 00:15:22,715
مثل ما رأيناه في ملف HTML مكون القائمة،

208
00:15:22,715 --> 00:15:25,900
ثم في ملف تفاصيل الطبق الخاص بي،

209
00:15:25,900 --> 00:15:32,035
يمكنني استخدام وحدة أخرى تسمى وحدة الإدخال.

210
00:15:32,035 --> 00:15:35,505
ثم، لهذا الطبق،

211
00:15:35,505 --> 00:15:39,555
وأنا ذاهب لمجرد أن أعلن أنه طبق.

212
00:15:39,555 --> 00:15:45,095
الآن، وحدة الإدخال هذه تسمح لي أن أعلن الديكور

213
00:15:45,095 --> 00:15:50,905
لهذا المتغير الطبق الذي قمت بتعريفه هنا،

214
00:15:50,905 --> 00:15:57,800
مثل هذا، عند الإدخال مع قوس هنا إلى هذا الطبق هنا.

215
00:15:57,800 --> 00:16:01,025
ثم، أيضا، أنا بحاجة لاستيراد

216
00:16:01,025 --> 00:16:10,010
فئة الطبق

217
00:16:10,010 --> 00:16:18,975
من طبق مشترك هنا.

218
00:16:18,975 --> 00:16:24,610
لذلك، مع هذا، لذلك ما حدث هو أنني الاستفادة من وحدة الإدخال.

219
00:16:24,610 --> 00:16:30,655
لذلك، هذه طريقة لتوفير المعلومات إلى مكون من مكون آخر.

220
00:16:30,655 --> 00:16:33,650
يمكنك ربط خاصية في قالب

221
00:16:33,650 --> 00:16:37,460
المكون الآخر كما رأينا في ملف component.html القائمة،

222
00:16:37,460 --> 00:16:41,550
وبعد ذلك سيكون متاحًا كمدخل لهذا المكون عن طريق

223
00:16:41,550 --> 00:16:47,070
الإعلان عن متغير ثم استدعاء ديكور الإدخال لذلك.

224
00:16:47,070 --> 00:16:51,400
الآن، مع هذا، دعونا حفظ التغييرات على جميع الملفات التي قمنا بها

225
00:16:51,400 --> 00:16:56,990
ومن ثم إلقاء نظرة على النسخ المتماثل الزاوي.

226
00:16:56,990 --> 00:17:00,140
الذهاب إلى متصفحنا،

227
00:17:00,140 --> 00:17:02,260
نرى أنه في هذا النسخ المتماثل الزاوي،

228
00:17:02,260 --> 00:17:04,000
لا يتم عرض أي شيء هنا.

229
00:17:04,000 --> 00:17:07,470
لأنه الآن، الطبق المحدد،

230
00:17:07,470 --> 00:17:11,120
لم نختار أي واحد من الأطباق لذلك أيضا الطبق المحدد

231
00:17:11,120 --> 00:17:14,985
هو كائن فارغ هناك.

232
00:17:14,985 --> 00:17:23,050
لذلك، نستخدم NGiF في القالب لتفاصيل الطبق.

233
00:17:23,050 --> 00:17:27,765
لذلك، مع إلقاء نظرة سريعة على قالب تفاصيل الطبق،

234
00:17:27,765 --> 00:17:31,810
كنت قد نفذت هذا كجزء من مهمتك.

235
00:17:31,810 --> 00:17:38,315
لذلك، يجب أن تكون قد استخدمت نجيف مع الطبق لكل من التعليمات البرمجية،

236
00:17:38,315 --> 00:17:41,400
فضلا عن قائمة مد هناك.

237
00:17:41,400 --> 00:17:44,125
لذا، إذا قمت بذلك،

238
00:17:44,125 --> 00:17:47,705
فعندما يكون الطبق غير محدد حاليًا،

239
00:17:47,705 --> 00:17:50,175
فلن يتم عرض أي شيء في الأسفل.

240
00:17:50,175 --> 00:17:53,255
ولكن لحظة النقر على أي واحد من الأطباق،

241
00:17:53,255 --> 00:17:58,005
ثم ترى على الفور تفاصيل الطبق التي يتم عرضها في الجزء السفلي هنا.

242
00:17:58,005 --> 00:18:00,840
الآن يمكنني تحديد الطبق الثاني ثم على الفور،

243
00:18:00,840 --> 00:18:06,000
ستلاحظ أن تفاصيل الطبق التي يتم عرضها أدناه يتم تغييرها.

244
00:18:06,000 --> 00:18:11,505
لذلك، في أي وقت أنقر على أي واحد من هذه الأطباق،

245
00:18:11,505 --> 00:18:15,670
سيتم عرض تفاصيل هذا الطبق المحدد، بما في ذلك التعليقات في الأسفل هنا.

246
00:18:15,670 --> 00:18:20,710
لذلك، هذا هو بالضبط ما نريد تحقيقه في هذه العملية بالذات.

247
00:18:20,710 --> 00:18:27,855
لذلك، هنا، كنت قد رأيت استخدام ربط البيانات، ثلاثة أنواع مختلفة،

248
00:18:27,855 --> 00:18:31,970
بما في ذلك معالج الحدث

249
00:18:31,970 --> 00:18:37,110
والحدث، وأيضا رأيت كيف يمكننا الاستفادة من وحدة الإدخال لتكون قادرة على

250
00:18:37,110 --> 00:18:42,855
استرداد المعلومات إلى مكون قادم من مكون آخر.

251
00:18:42,855 --> 00:18:45,820
مع هذا، نكمل هذا التمرين،

252
00:18:45,820 --> 00:18:48,750
حيث تعلمنا كيفية الاستفادة من مختلف

253
00:18:48,750 --> 00:18:56,005
ميزات ربط البيانات المتاحة في Angular لتنفيذ تطبيقنا.

254
00:18:56,005 --> 00:19:02,010
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع ربط بيانات الرسالة.