في هذا الفصل ، سوف نتعلم كيفية استخدام Angular2 لإظهار البيانات ، وكيفية استخدام تعليماته المدمجة NgFor و NgIf
أولاً ، تأكد من أن لديك برنامج عينة Angular2 يمكن تشغيله. من الأفضل أن نكون المشروع الصغير السريع الذي أكملناه في الفصل السابق أو المشروع الصغير السريع الذي أكملته وفقًا للخطوات المذكورة فوق الموقع الرسمي ، لأن تفسيراتنا تستند إلى هذا الأساس ؛ ثم لنبدأ الرحلة السعيدة التالية.
نظرًا لأن سلسلة المقالات الخاصة بنا تستخدم TypeScript ، قبل قراءة المحتوى التالي ، يمكنك أيضًا النظر إلى أنواع TypeScript أو ES6. عناوين URL الخاصة بهم هي TypeScript و ES6. إذا كنت قد تعلمت لغات مماثلة موجهة نحو الكائنات مثل Java أو C ++ من قبل ، فسيكون من السهل تعلم الفصول هنا ؛ الفصول هنا تشبه أساسا تلك في تلك اللغات.
في القسم السابق ، قمنا بتصدير فئة فارغة في app.component.ts ، لذلك نحن بحاجة إلى البدء في ملءها لجعلها ممتلئة. أولاً ، نضيف ثلاث سمات إلى فئة AppComponent (المكون) ، الاسم ، العمر ، الفاكهة ؛ تماما مثل ما يلي:
تصدير فئة AppComponent {username = 'dreamapple' ؛ العمر = 22 ؛ Fruit = 'Apple'}طريقة الكتابة أعلاه هي في الواقع مجرد شكل من أشكال الاختصار ، ولكن يجب أن تكون طريقة الكتابة الكاملة كما يلي:
تصدير فئة AppComponent {// username = 'dreamapple' ؛ // العمر = 22 ؛ // fruit = 'Apple' اسم المستخدم: String ؛ العمر: العدد ؛ الفاكهة: سلسلة. Constructor () {this.userName = 'DreamApple' ؛ this.age = 22 ؛ this.fruit = 'Apple' ؛ }}ثم يتعين علينا تعديل القالب الخاص بنا ، لأنه يتعين علينا استخدام المزيد من HTML في القالب ، لذلك يتعين علينا استخدام backticks لالتفاف شظايا HTML الخاصة بنا ؛ وظيفة الديكور لدينا هي كما يلي:
component ({selector: 'my-app' ، template: `<p> اسمي هو: {{username}} </p> <p> عمري هو: {{Age}} </p> <p> ثمرتي المفضلة هي: {{fruit}} </p>`})بالطبع ، يمكننا أيضًا استخدام خيارات تكوين TemplateUrl لكائن البيانات الوصفية في وظيفة الديكور ، كما هو موضح أدناه:
component ({selector: 'my-app' ، // template: `// <p> اسمي هو: {{username}} </p> // <p> عمري هو: {{Age}} </p> // <p> الفاكهة المفضلة لدي هي: 'تطبيق/قوالب/app-template.html'})من بينها ، يمثل App/Templates/App-template.html ملف App-template.html في مجلد القوالب أسفل الدليل الجذر للبرنامج (بدلاً من Angular2 Travel) ، ثم نسخ جزء HTML الذي كتبناه من قبل.
من العملية أعلاه ، يمكننا أن نرى أن Angular2 لا يزال يستخدم الأقواس المزدوجة المستخدمة بواسطة Angular1 ؛ يتم استخدامه كرمز لاستيفاء ، حيث يظهر رمز الاستيفاء هو البيانات التي نريد عرضها. بعد ذلك ، نحتاج إلى تعلم استخدام التعليمات المدمجة ngfor. يجب أن يبدأ الطلاب الذين يعرفون Angular1 بسهولة في هذه التعليمات ، لأن NGFOR و NG-Repeat متماثلان بشكل أساسي ؛ يتم استخدامه لحلق كائن ifrabil ، وهو صفيف بشكل عام.
بعد ذلك ، نضيف قائمة ثمار سمة أخرى إلى AppComponent ، كما هو موضح أدناه:
تصدير فئة AppComponent {username = 'dreamapple' ؛ العمر = 22 ؛ Fruitslist = ['Apple' ، 'Orange' ، 'Pear' ، 'Banana'] ؛ الفاكهة = this.fruitslist [0] ؛ // استخدم this.fruitslist [0]}الشيء الذي نحتاج إلى الانتباه إليه هو المكان الذي تم تعليقه. يجب أن نستخدم هذا. fruitslist للإشارة إلى السمات التي حددناها أعلاه. إذا تم استخدام Fruitslist ، فلن يعرف Angular ما تمثله.
بعد ذلك ، سنقوم بتخطي مجموعة الفاكهة هذه ونرى كيفية تمثيله في القالب.
@component ({selector: 'my-app' ، template: `<p> اسمي هو: {{username}} </p> <p> عمري هو: {{age}} </p> <ul> <li *ngfor =" Let Fruits of Fruitslist "{{}}}}} {{fruit}} </p> `})هناك العديد من الأشياء التي يجب الانتباه إليها في الكود أعلاه. أولاً ، استخدمنا *ngfor بدلاً من ngfor. لا يمكن إزالة * هنا ؛ إذا تمت إزالته ، فلن يقوم برنامجنا بالإبلاغ عن خطأ ، لكننا فقط نقوم بتخليص العنصر الأول من الصفيف. بخصوص سبب حاجتك إلى إضافة *، يمكنك إلقاء نظرة على بناء جملة القالب هنا بالتفصيل ؛ بالطبع ، يمكننا كتابة بعض العمليات وراء التعبير *ngfor الذي يمكن أن يساعدنا في إظهار كل فهرس ، والذي يمكن أن يكون مثل ما يلي:
<li *ngfor = "دع ثمر الفواكه ؛ دع i = index ؛"> {{i}}-{{fruit}} </li>
هناك بعض الأشياء التي يجب ملاحظتها في رمز القالب أعلاه. بادئ ذي بدء ، تحتاج إلى معرفة أن *ngfor يتبعها تعبيرات ، حتى نتمكن من كتابة بعض التعبيرات البسيطة لمساعدتنا على حلقة أفضل ؛ نستخدم أيضًا Let Letwords ، وإضافة نطاق مستوى الكتلة ، ونحصر هذه المتغيرات على كتلة الحلقة *ngfor. حسنًا ، إذا كنت تريد معرفة المزيد عن *ngfor ، فيمكنك إلقاء نظرة على واجهة برمجة التطبيقات الرسمية حول Ngfor.
التعليمات التالية التي سيتم تقديمها هي NGIF. بالطبع ، تشبه هذه التعليمات بشكل أساسي تعليمات NG-IF Angular1. قرر ما إذا كنت تريد إضافة أو إزالة عنصر على DOM بناءً على قيمة التعبير التالي.
انظر كيف نستخدم هذا التوجيه في القالب:
<p *ngif = "fruitslist.length> 3"> طول قائمة الفواكه أكبر من 3 </p>
<p *ngif = "fruitslist.length <= 3"> طول قائمة Fruits's ليس أكبر من 3 </p>
بادئ ذي بدء ، يجب أن نشير إلى أنه ، مثل استخدام *ngfor ، نستخدم *ngif ؛ ثم يمكننا كتابة تعبير بعد *ngif ، والنتيجة العائد المتوقعة لهذا التعبير هي قيمة منطقية ؛ ثم سيقرر توجيه *ngif ما إذا كان سيتم إضافة أو إزالة العنصر الذي يتحكم فيه على DOM استنادًا إلى قيمة هذا التعبير.
نظرًا لأننا نستخدم TypeScript ، يمكننا استخدام العديد من الميزات الجديدة ، مثل استخدام الفصول لإنشاء مثيلات ؛ بعد ذلك سنستخدم فئة الفاكهة لبناء مثيل الفاكهة لدينا. أولاً ، نقوم بإنشاء مجلد جديد ضمن مجلد التطبيق ، ثم نقوم بإنشاء ملف fruit.ts ، حيث نكتب رمز فئة الفاكهة:
فئة التصدير الفاكهة {مُنشئ (الاسم العام: سلسلة ، السعر العام: رقم) {}}دعنا نوضح الرمز أعلاه. نستخدم المُنشئ ونعلن خصائص هذا الكائن في المُنشئ ؛ واحد هو الاسم والآخر هو السعر. نستخدم الاسم: السلسلة ، والسعر: معلمات الأرقام في المنشئ لإنشاء وتهيئة خصائص هذا الكائن. بعد ذلك ، يمكننا استخدام هذا الفصل في برنامجنا ؛
أولاً ، قدم هذا الفصل في app.component.ts:
استيراد {fruit} من './classes/fruits' ؛
ثم استخدم فئة الفاكهة في AppComponent لتهيئة قائمة الفاكهة الخاصة بنا:
تصدير فئة AppComponent {username = 'dreamapple' ؛ العمر = 22 ؛ Fruitslist = [فاكهة جديدة ('Apple' ، 20) ، فاكهة جديدة ('Orange' ، 30) ، فاكهة جديدة ('Pear' ، 40) ، فاكهة جديدة ('Banana' ، 50)] ؛ . // استخدم this.fruitslist [0]}ثم نحتاج إلى تغيير قالبنا:
نسخة الكود كما يلي:
<li *ngfor = "اسمحوا للفواكه من فاكهة ؛ دع i = index ؛"> {{i}}-{{fruit.name}}-{{fruit.price}}} </li>
يجب أن تكون النتيجة النهائية هي ما يلي:
أخيرًا ، يجب أن أقول إن كلا من ES6 و TypeScript يجعلني أشعر أنني أكتب Java ؛ هذا هو أيضا مؤيد و con. الميزة هي أنه يزيد من قابلية قراءة الكود ، ويجعل البرنامج أسهل في الحفاظ عليه ، ويكتب مشاريع واسعة النطاق أكثر ملاءمة ، مما يجعل العمل الجماعي مريحًا للغاية. بالطبع ، هناك بعض أوجه القصور ، التي تزيد بشكل أساسي من تكاليف تعلم الجميع ؛ بالطبع ، كل شيء يتطلع إلى الأمام.