السلام عليكم ورحمة الله وبركاته

سنتحدث اليوم عن طريقة ربط المعطيات data binding  ضمن angular 2.

تعتبر خاصية ربط المعطيات باتجاهين عبارة عن ميزة كانت متواجدة ضمن angular js, ولكن تم ازالة هذه الميزة من الاصدار الجديد angular 2.

لنوضح الآن  طريقة الربط ضمن angular 2.

لنفترض بأن لدينا class  ويوجد ضمنه خاصية property لها قيمة ونمط معطيات كما يلي:

عندها, يصبح بإمكاننا ربط احدى خاصيات عناصر html بهذه الخاصية كما يلي:

عندها سوف تسند قيمة هذه الخاصية Property الى خاصية عنصر html التي تم ربطها به.

سنطرح مثال عن كيفية تحقيق هذا النوع من الربط للمعطيات.

في مثالنا, سنعمد على عرض صور, بحيث ان مصدر الصور images source سوف يأتي من الخاصية الواردة ضمن ال class.

فيما يلي الخطوات المطلوبة لتحقيق هذا الربط:

• قم بتحميل اي صورتين, على سبيل المثال, يمكن تحميل الصورة ادناه
• خزن هذه الصور ضمن مجلد يدعى “Images” ضمن مجلد “app”.
• اضف الكود التالي الى ملف
  component.ts كما هو موضح في الشكل ادناه.
  
• اضف الكود التالي الى ملف
  component.html كما هو موضح ادناه
  

كما نلاحظ في الكود اعلاه, فإننا نسند الخاصية src من الصورة الى الخاصية التابعة للصف.

النتيجة:

نتيجة تنفييذ البرنامج السابق ستُظهر كل صورة من الصور وبجوارها رقم.

————————

والى اللقاء في الحلقة القادمة التي سنتحدث فيها ان شاء الله عن عمليات الاضافة, الحذف, التعديل والاستعراض باستخدام HTTP.

الى اللقاء في الحلقة القادمة, والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

 

الترجمة	المصطلح
مفتوح المصدر	Open source
اطار عمل	framework
تطبيق	application
واجهات العرض	Views
النشر	Deployment
مخدم الويب	Web server
منصة عمل	Platform
موديول	Module
صف	Class
فعالية	Functionality
مكون	Component
استيراد	import
قالب	template
الموجهات	Directives

المراجع:

1. https://www.tutorialspoint.com/angular2/index.htm
2. الموقع الرسمي https://angular.io/