كيفية استخدام التوجيه الزاوي المدمج: ngIf و ngFor و ngClass والمزيد

يمكنك إضافة توجيهات إلى HTML في مشروع Angular الخاص بك. يتحكم البعض في بنية الترميز الخاصة بك بينما يركز البعض الآخر على السمات.

ستتناول هذه المقالة توجيهات Angular الستة الأكثر شيوعًا: ngFor و ngIf و ngClass و ngStyle و ngModel و ngSwitch.

ما هي التوجيهات الزاويّة؟

تسمح لك التوجيهات Angular باستخدام عبارات if و for loops ، وإضافة سلوك آخر إلى كود HTML الخاص بمشروع Angular.

التوجيه	وصف
* ngIf	يمكنك استخدام ngIf عندما تريد عرض بعض كتل HTML فقط إذا كانت تفي بشرط معين. على سبيل المثال ، إذا كان لديك نموذج به نافذة منبثقة يتم عرضها بعد قيام المستخدم بإدخال إدخال لحقل معين.
* ngFor	يمكنك استخدام ngFor إذا كنت بحاجة إلى كتلة معينة لتكرارها عدة مرات. على سبيل المثال ، إذا كانت لديك قائمة بالعناصر وتحتاج إلى عرض div لكل عنصر.
* ngClass	هذا يضيف نمطًا شرطيًا باستخدام فئة. إذا استوفت عبارة if الشرط ، فسيتم تطبيق الفئة المحددة.
* ngStyle	هذا يضيف التصميم الشرطي في الخط. إذا استوفت عبارة if الشرط ، فسيتم تطبيق الأنماط المحددة.
* نموذج	هذا يسمح لك بعمل ربط ثنائي الاتجاه. هذا يعني أنه يمكنك تمرير البيانات في كلا الاتجاهين بين ملف HTML و TypeScript. على سبيل المثال ، يمكنك تمرير قيمة السمة من ملف TypeScript إلى ملف HTML ، والعكس صحيح. instagram viewer
* ngSwitch	يتيح لك هذا إضافة عبارة switch مع العديد من الحالات للتحقق من العديد من القيم. بناءً على الحالات ، ستظهر بعض عناصر HTML.

تتضمن التوجيهات الهيكلية بنية عناصر HTML. وتشمل هذه ngIf و ngFor و ngSwitch. تتضمن توجيهات السمات تغيير خصائص عناصر HTML. وتشمل هذه ngStyle و ngClass و ngModel.

كيفية استخدام ngIf

لاستخدام ngIf ، ستحتاج إلى شرط للتقييم إلى "صحيح" لإظهار عنصر HTML معين.

1. أضف متغيرين إلى ملف TypeScript الخاص بك. في هذا المثال ، يوجد متغير noPlaylists ومتغير لتخزين قوائم التشغيل. سيتم تقييم هذا المتغير إلى صحيح إذا كان طول مصفوفة قوائم التشغيل يساوي 0.

   noPlaylists: منطقية = خطأ ؛
   قوائم التشغيل: أي = [] ؛
   البناء() { }
    ngOnInit (): باطل {
    إذا (this.playlists.length 0) {
    this.noPlaylists = صحيح ؛
    }
   }
   

2. في HTML ، أضف العبارة * ngIf. إذا كانت noPlaylists صحيحة ، فستظهر رسالة الخطأ الموجودة في النطاق أدناه. وإلا فلن يحدث ذلك. يمكنك تطبيق ngIf على أنواع مختلفة من علامات HTML.

   
   
   لا توجد قوائم تشغيل متاحة.
   
   
   
   

3. لإضافة مكون "else" إلى عبارة if ، ستحتاج إلى إضافة كود HTML لجزء "else" في قالب قالب.

   
   
   لا توجد قوائم تشغيل متاحة.
   
   
   
   
   
   
   تم العثور على قوائم التشغيل.
   
   
   
   

كيفية استخدام ngFor

إذا كنت بحاجة إلى تكرار عدد معين من الكتل على صفحة ، فيمكنك استخدام التوجيه ngFor.

1. في ملف TypeScript ، أضف عناصر إلى المصفوفة.

   قوائم التشغيل: أي = [
    {"الاسم": "Rock"، "numberOfSongs": 5}،
    {"الاسم": "معاصر"، "numberOfSongs": 9}،
    {"الاسم": "شائع" ، "numberOfSongs": 14} ،
    {"الاسم": "Acoustic"، "numberOfSongs": 3}،
    {"name": "Wedding Songs"، "numberOfSongs": 25}،
    {"الاسم": "معدن"، "numberOfSongs": 0}،
   ];
   

2. في ملف HTML ، أضف العبارة * ngFor.

   تم العثور على قوائم التشغيل.
   
   
   
   
   {{playlist.name}}
   أغاني {{playlist.numberOfSongs}}
   
   
   
   
   
   
   

   داخل ngFor ، ستتمكن من الإشارة إلى كل كائن في المصفوفة باستخدام متغير "playlist". سيقوم "playlist.name" و "playlist.numberOfSongs" بطباعة كلتا السمتين داخل ملف بطاقة شعار.

كيفية استخدام ngClass

يمكنك تغيير فئة النمط التي يستخدمها عنصر div معين ، بناءً على شرط.

1. أضف فئتين إلى ملف CSS بأنماط مختلفة. يمكنك إضافة أي نوع من ملفات تصميم CSS التي تريدها ، مثل ألوان الخلفية المختلفة.

   .songs {
    لون الخلفية: # F7F5F2 ؛
   }
   .noSongs {
    لون الخلفية: # FFA8A8 ؛
   }

2. ضمن حلقة for-loop من الخطوة السابقة ، أضف توجيه السمة ngClass. [ngClass] = "playlist.numberOfSongs> 0؟ 'الأغاني': 'noSongs' "تستخدم نفس الشيء المشغل الثلاثي الذي جافا سكريبت وغيرها من اللغات المستخدمة.

   
   
   
   
   {{playlist.name}}
   أغاني {{playlist.numberOfSongs}}
   
   
   
   
   

   إذا كان عدد الأغاني أكبر من الصفر ، فسيتم تطبيق فئة "الأغاني" على div. سيعطي هذا لون خلفية رمادي. وإلا ، إذا كان عدد الأغاني صفرًا ، فسيتم تطبيق فئة "noSongs" على div. سيعطي هذا لون خلفية أحمر div.

كيفية استخدام ngStyle

بدلاً من استخدام ngClass ، يمكنك استخدام ngStyle إذا كنت ترغب في تطبيق أسلوب موضعي بدلاً من التصميم عبر فصل دراسي.

1. قم بتغيير ngClass من الخطوة السابقة لاستخدام ngStyle بدلاً من ذلك.

   
   
   {{playlist.name}}
   أغاني {{playlist.numberOfSongs}}
   
   
   
   

[ngStyle] = "{'background-color': playlist.numberOfSongs> 0؟ '# F7F5F2': '# FFA8A8'، 'color': playlist.numberOfSongs> 0؟ "أسود": "أزرق غامق"} "

شاركشاركسقسقةشاركبريد الالكتروني

مواضيع ذات صلة

• برمجة
• برمجة
• جافا سكريبت
• لغة البرمجة
• CSS