الآن بعد أن قمنا بفحص ربط البيانات،
دعونا نستخدمها
للعمل على تطبيق Angular الذي كنا نستخدمه حتى الآن.
في الإصدار السابق من تطبيق Angular،
كان لدينا القائمة التي يتم تقديمها،
ثم كان لدينا طبق معين يتم عرضه في الأسفل.
الآن، نود بشكل مثالي أن يتمكن المستخدم من النقر
على أي عنصر من عناصر القائمة ثم التفاصيل التي سيتم عرضها للمستخدم.
هذا هو المكان الذي سيساعدنا فيه استخدام ربط البيانات
على تنفيذ تطبيقنا لتمكين هذا النوع من الميزة.
الذهاب إلى الحالة الحالية لتطبيقنا في المتصفح،
يمكننا الآن أن نرى أن لدينا القائمة لدينا وفي الجزء السفلي
لدينا تفاصيل طبق معين واحد يتم عرضه هناك.
الآن، هذا جيد وجيد لبداية، ولكن من الناحية المثالية،
ما نود أن يكون هو أنه إذا نقر المستخدم على أي واحد من هذه الأطباق،
ونحن نريد أن تكون قادرة على إظهار تفاصيل الطبق في الجزء السفلي من القائمة هنا.
لذلك، نود أن يتم تغيير تفاصيل الطبق على
أساس أي طبق معين نضغط عليه في أي لحظة.
إذن، كيف يمكننا تحقيق ذلك؟
لذا، هذا هو المكان الذي يأتي فيه استخدام ربط البيانات لإنقاذنا.
الذهاب إلى تطبيقنا،
أول شيء سأقوم به هو في المجلد المشترك،
والآن أنت تدرك أن معلومات الطبق يتم
استخدامها في مكون القائمة وكذلك في مكون تفاصيل الطبق.
الآن، عندما يكون لديك معلومات يتم مشاركتها مثل هذه،
سيكون من الأنسب أن يكون لديك مكان مركزي
يتم من خلاله توفير هذه المعلومات لكل من هذين المكونين.
لذا لمساعدتي في القيام بذلك،
ما سأقوم به هو الذهاب إلى مجلد المشاركة ثم إنشاء ملف جديد، ومن
ثم سأقوم بتسمية هذا الملف على أنه dishes.ts.
داخل هذا الملف dishes.ts،
سأقوم بإنشاء الثابت الذي يزود تفاصيل الأطباق.
لذلك للقيام بذلك،
أود أولا استيراد الطبق،
من فئة الطبق
التي قمت بتحديدها بالفعل في وقت سابق.
حتى الآن، يمكنني تحديد
ثابت يسمى كأطباق من نوع صفيف الأطباق،
ومن ثم هذا هو المكان الذي سأقوم بتخزين تفاصيل جميع أطباقي.
الآن، في الإصدار السابق من التطبيق،
رأينا استخدام الأطباق ورأينا
مصفوفة كائن جافا سكريبت التي تحتوي على تفاصيل الأطباق.
الآن، نحن ذاهبون لنقل كل هذا المحتوى ومع نسخة محدثة منه.
لذلك،
يتم إعطاء نسخة محدثة من صفيف كائن جافا سكريبت الأطباق لك في التعليمات،
لذلك فقط اذهب ونسخ
مصفوفة كائن جافا سكريبت بأكملها من هناك ومن ثم سنقوم لصقها في مكانها هنا.
لذلك، يصبح هذا الموقع المركزي الذي
يتم توفير معلومات الأطباق إلى التطبيق الخاص بك.
لقد قمت الآن بقطع ولصق تفاصيل
الطبق التي ترد في تعليمات التمرين في مكانها هنا،
ولذلك لدي أربعة أطباق تم لصقها هنا واحد،
اثنان، وأربعة أطباق تم لصقها هنا،
وكل من تلك الأطباق يحتوي بالطبع على
تفاصيل الطبق المحدد وأيضا تعليقات على الطبق.
الآن بهذه الطريقة
يصبح تقديم المعلومات في قالب تفاصيل الطبق واضحًا لأي واحد من هذه الأطباق المختارة.
الآن، إذا كنت التراجع سترى أن هناك بعض الخطوط الحمراء هنا.
السبب في هذه الخطوط الحمراء هو أنه عندما تنظر إلى كائن الطبق هنا،
سترى أنه في كائن الطبق ليس لدينا خاصية هناك تسمى التعليقات.
لذلك، نحن بحاجة إلى إنشاء خاصية جديدة تسمى
التعليقات لإضافتها إلى هذا الطبق هنا. إذاً، كيف نفعل ذلك؟
لذلك للقيام بذلك، سوف نقول تعليقات
وبعد ذلك أود أن أقول مجموعة التعليقات هنا.
الآن على الفور تدرك أنه لا يوجد مصفوفة تعليق متاحة لنا،
لذلك نحن بحاجة إلى إنشاء مصفوفة التعليقات هذه.
لذا، ما سأقوم به هو أنني سأقوم بإنشاء فئة JavaScript أخرى
تحتوي على تفاصيل التعليق هناك.
لذلك للقيام بذلك، أولا سوف استيراد تعليق
من فئة التعليق هنا.
الآن بالطبع الخط الأحمر يخبرني على الفور أنه ليس لدي فصل تعليق.
لذا، كيف نضيف فئة تعليق؟
حتى الذهاب إلى المجلد المشترك،
سنقوم بإنشاء ملف جديد باسم comment.ts وداخل هذا التعليق.ts،
سنقوم بتحديد فئة تسمى التعليق هنا.
الآن، نحن بحاجة إلى تحديد خصائص معينة لفئة التعليق هذه.
إذن، ما هي الخصائص التي لدينا؟
دعونا نلقي نظرة سريعة على ملف dishes.ts الخاص بنا
ومن ثم سنرى ما هي خصائص كل تعليق.
الذهاب إلى ملف dishes.ts،
ترى أن التعليقات تحتوي على
خاصية واحدة تسمى كتصنيف يبدو أنه رقم،
ثم لديك تعليق وهو سلسلة
ومؤلف وهو عبارة عن سلسلة وتاريخ وهو أيضًا سلسلة.
لذلك، نحن بحاجة إلى تحديد أربعة خصائص لفئة التعليق الخاصة بي هنا.
لذا، بالعودة إلى فئة التعليق،
سأعرّف التصنيف كرقم.
لذلك، في نوع البرنامج النصي،
كل شيء هو رقم هنا ثم كان لدينا تعليق وهو مؤلف سلسلة،
وهو أيضا سلسلة،
ومن ثم التاريخ الذي هو أيضا سلسلة هنا.
لذا، هذه هي الخصائص الأربعة التي لدينا هنا.
الآن، من الواضح أننا رأينا كيف نستخدم سلسلة التاريخ
في التمرين السابق، وفي المهمة كيف استخدمنا
سلسلة التاريخ لإظهار تاريخ التعليق هناك.
الآن، في حال كنت تتساءل،
ماذا تحتوي سلسلة التاريخ هذه بالفعل؟
الذهاب هنا، سترى أن سلسلة التاريخ هذه بتنسيق معين.
لذلك، هذا هو التنسيق القياسي لتخزين تاريخ هنا.
تنسيق التاريخ هذا هو طريقة ISO OSI لتحديد تنسيق التاريخ.
لذلك، نحن فقط ذاهبون لاستخدام هذا،
لذلك هذا هو تنسيق موحد الذي يستخدم أيضا في
العديد من لغات البرمجة التي تسمح لك لتخزين البيانات كسلسلة هنا،
لذلك أنا ذاهب فقط للاستفادة من ذلك على هذا النحو هنا.
بعد إجراء التغييرات على
ملف dish.ts مثل هذا هنا ثم إضافة في فئة التعليق هنا،
نرى الآن أن ملف dishes.ts لم يعد يحتوي على تلك الخطوط الحمراء لأنه
تمت إضافة التعليق في كمصفوفة كائن إلى فئة الطبق الخاصة بي هنا.
لذلك، هذا يعمل بشكل جيد حتى الآن.
الآن، كيف نستفيد من هذا؟
الآن للاستفادة من هذا،
سوف نذهب إلى عنصر القائمة t.ts،
ثم هنا لدينا هذا الثابت المحدد هنا.
الآن، هذه ليست الطريقة الصحيحة للقيام بذلك
في وقت لاحق سترى لي باستخدام خدمة لكل هذا.
لذلك، اسمحوا لي أن قطع هذا الثابت من هنا تماما وبدلا من استخدام هذا الثابت،
وأنا ذاهب الآن لاستيراد أطباق
من المجلد المشترك
هنا، أطباق مشتركة هنا.
لذلك، لاحظ أن مجلد الأطباق هذا يقوم بتصدير الأطباق الثابتة هنا.
لذلك، هذا هو السبب في أننا قادرون على الاستفادة منه.
لذا بالعودة إلى الأطباق الأولى هنا،
أحتاج لتصدير هذا من هنا،
لذا سأقول التصدير.
ثابت. لذلك، عندما أفعل ذلك،
ثم في عنصر القائمة بلدي أستطيع أن أرى أن أطباقي يمكن استيرادها هنا بشكل صحيح.
ثم، فإن بقية التعليمات البرمجية هنا تعمل على ما يرام دون أي تغييرات.
سترى أنه إذا قمت بحفظ القيم الآن
وبعد ذلك نظرت إلى تطبيق الويب الخاص بك في المتصفح،
فإنه سيتم تقديم على ما يرام حتى بعد هذه التغييرات.
بعد حفظ جميع التغييرات التي قمت بها حتى الآن في جميع الملفات،
إذا ذهبت ونظرت إلى صفحة الويب الخاصة بك،
صفحة الويب الخاصة بك تعرض تماما كما كان من قبل.
الآن، الجزء الثاني من المشكلة.
نريد أن نكون قادرين على التواصل
عندما نضغط على أي من عناصر القائمة هذه،
نريد أن نكون قادرين على إيصال تلك المعلومات بحيث
يتم تقديم الطبق المقابل هنا.
لذا، هذا هو المكان الذي سنأخذ فيه مساعدة
ربط البيانات التي تعلمناها حتى الآن.
بالعودة إلى ملف قالب مكونات القائمة،
ما سنقوم به هو أن
هذا «التطبيق dishdetaille» الذي تقوم بتضمينه
في الأسفل هنا، لإضافة قالب مكونات تفاصيل الطبق إلى قالب مكونات القائمة،
سنقوم بإضافة في خاصية تسمى الطبق.
ثم، سنقوم بتعيين هذا ليكون «محدددديش».
تذكر أن الطبق المحدد هو متغير قمنا
بتعريفه في ملف مكونات القائمة TypeScript هنا.
لذلك، بهذه الطريقة؛
سيتم تمرير هذه القيمة من هذا الطبق المحدد من خلال هذا الطبق الملكية هنا.
الآن، سنرى كيف يمكن لمكون تفاصيل الطبق استرداد هذه المعلومات
ومن ثم الاستفادة منها بشكل جيد في الخطوة التالية في التمرين.
الآن، بينما نحن هنا،
سنقوم أيضا بإصلاح القضية الأخرى التي يجب أن نتعامل معها.
بمعنى، عندما يتم النقر على أي من عناصر القائمة،
فإنه سيتم إنشاء حدث نقرة ونريد أن
يتم تسليم هذه المعلومات إلى ملف TypeScript مكون القائمة لدينا.
لذلك، للقيام بذلك، سنذهب إلى قوائم شبكة القائمة التي حددناها هنا.
لهذا البلاط الشبكة هنا،
ما سأقوم به هو تحديد حدث النقر هنا.
لذلك، بالنسبة لحدث النقر،
ما سأقوم به هو أنني ذاهب لاستدعاء
طريقة محددة سأحدد داخل ملف component.ts القائمة الخاص بي.
إلى هذه الطريقة onSelect،
سأقوم بتزويد الطبق كمعلمة هنا.
ما هذا الطبق؟
هذا الطبق هو بالضبط هذا الطبق الذي اخترته في
هذا «السماح طبق من الأطباق» في بناء الجملة ngFor هنا.
لذا،
سيتم تمرير هذا الطبق المحدد، من مجموعة الأطباق التي اخترتها هنا، كمعلمة لهذه الطريقة onSelect،
ما سنقوم بتنفيذه في ملف component.ts القائمة.
لذلك، الآن بعد أن قمنا بذلك،
لذلك هذا هو المعالج الذي يحتاج إلى تنفيذه.
دعونا نذهب إلى ملف مكون القائمة ثم إصلاح
هذا الملف لتنفيذ هذا المعالج هناك.
لذلك، عندما تقوم بالنقر فوق أي عنصر من عناصر القائمة،
فسيتم استدعاء المقبض المقابل
وسيتم تمرير معلومات الطبق المحددة كمعلمة هنا.
الذهاب إلى ملف مكون القائمة t.ts، الآن،
سيتم تعيين الطبق المحدد قيمة على أساس الطبق الذي أختار.
لذلك، أنا ذاهب لإزالة هذا الجزء ثم الحق أدناه هنا،
وأنا ذاهب لتنفيذ طريقة أونسيليكت هنا.
لذلك، بالنسبة لطريقة onSelect،
سيحصل هذا على معلمة هي معلمة الطبق.
عندما تأتي معلمة الطبق هذه،
سأقوم بتعيين هذا المحددDish يساوي الطبق،
المعلمة التي جاءت كقيمة لطريقة onSelect هنا.
لذا، هذا هو.
لذلك، عند النقر على أي واحد من تلك العناصر في القائمة،
أي واحد من الأطباق في القائمة،
سيتم تمرير معلومات الطبق من خلال هذا ومن ثم
سيتم تعيين الطبق المحدد لهذا الكائن الطبق هنا.
الآن، لدينا كيف تأتي المعلومات من DOM.
ستؤدي النقرة المحددة
إلى إتاحة معلومات الطبق لنا وسيتم تعيين هذه القيمة للطبق المحدد.
الآن، والعودة إلى ملف HTML مكون القائمة،
نرى أننا قد قمنا بالفعل بتعيين هذه الخاصية الطبق لتحديدديش.
لذا، بهذه الطريقة، يتم تمرير قيمة الطبق المحددة
من خلال خاصية الطبق هذه إلى هذا التطبيق dishdetaille هنا.
الآن، كيف يمكن لمكون تفاصيل الطبق الخاص بي الحصول على هذه المعلومات؟
لذلك، نحن ذاهبون للذهاب إلى عنصر تفاصيل الطبق وإصلاح ذلك.
الذهاب إلى مكون تفاصيل الطبق،
أول شيء سأقوم به هو حذف
هذا الطبق الثابت من مكون تفاصيل الطبق الخاص بي.
أنا لم أعد بحاجة إليها.
الآن، عندما يتم ربط خاصية،
مثل ما رأيناه في ملف HTML مكون القائمة،
ثم في ملف تفاصيل الطبق الخاص بي،
يمكنني استخدام وحدة أخرى تسمى وحدة الإدخال.
ثم، لهذا الطبق،
وأنا ذاهب لمجرد أن أعلن أنه طبق.
الآن، وحدة الإدخال هذه تسمح لي أن أعلن الديكور
لهذا المتغير الطبق الذي قمت بتعريفه هنا،
مثل هذا، عند الإدخال مع قوس هنا إلى هذا الطبق هنا.
ثم، أيضا، أنا بحاجة لاستيراد
فئة الطبق
من طبق مشترك هنا.
لذلك، مع هذا، لذلك ما حدث هو أنني الاستفادة من وحدة الإدخال.
لذلك، هذه طريقة لتوفير المعلومات إلى مكون من مكون آخر.
يمكنك ربط خاصية في قالب
المكون الآخر كما رأينا في ملف component.html القائمة،
وبعد ذلك سيكون متاحًا كمدخل لهذا المكون عن طريق
الإعلان عن متغير ثم استدعاء ديكور الإدخال لذلك.
الآن، مع هذا، دعونا حفظ التغييرات على جميع الملفات التي قمنا بها
ومن ثم إلقاء نظرة على النسخ المتماثل الزاوي.
الذهاب إلى متصفحنا،
نرى أنه في هذا النسخ المتماثل الزاوي،
لا يتم عرض أي شيء هنا.
لأنه الآن، الطبق المحدد،
لم نختار أي واحد من الأطباق لذلك أيضا الطبق المحدد
هو كائن فارغ هناك.
لذلك، نستخدم NGiF في القالب لتفاصيل الطبق.
لذلك، مع إلقاء نظرة سريعة على قالب تفاصيل الطبق،
كنت قد نفذت هذا كجزء من مهمتك.
لذلك، يجب أن تكون قد استخدمت نجيف مع الطبق لكل من التعليمات البرمجية،
فضلا عن قائمة مد هناك.
لذا، إذا قمت بذلك،
فعندما يكون الطبق غير محدد حاليًا،
فلن يتم عرض أي شيء في الأسفل.
ولكن لحظة النقر على أي واحد من الأطباق،
ثم ترى على الفور تفاصيل الطبق التي يتم عرضها في الجزء السفلي هنا.
الآن يمكنني تحديد الطبق الثاني ثم على الفور،
ستلاحظ أن تفاصيل الطبق التي يتم عرضها أدناه يتم تغييرها.
لذلك، في أي وقت أنقر على أي واحد من هذه الأطباق،
سيتم عرض تفاصيل هذا الطبق المحدد، بما في ذلك التعليقات في الأسفل هنا.
لذلك، هذا هو بالضبط ما نريد تحقيقه في هذه العملية بالذات.
لذلك، هنا، كنت قد رأيت استخدام ربط البيانات، ثلاثة أنواع مختلفة،
بما في ذلك معالج الحدث
والحدث، وأيضا رأيت كيف يمكننا الاستفادة من وحدة الإدخال لتكون قادرة على
استرداد المعلومات إلى مكون قادم من مكون آخر.
مع هذا، نكمل هذا التمرين،
حيث تعلمنا كيفية الاستفادة من مختلف
ميزات ربط البيانات المتاحة في Angular لتنفيذ تطبيقنا.
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع ربط بيانات الرسالة.