محلول: html ngfor مع الفهرس

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

<ul>
  <li *ngFor="let item of items; let i = index">{{i}} - {{item}}</li>
</ul>

1. ينشئ هذا السطر من التعليمات البرمجية قائمة غير مرتبة.
2. يتم استخدام التوجيه * ngFor للتنقل عبر مصفوفة العناصر وعرض كل عنصر في القائمة.
3. تُستخدم الكلمة الرئيسية let للإعلان عن متغير يسمى "item" والذي يحتفظ بالعنصر الحالي في تكرار الحلقة.
4. تُستخدم الكلمة الرئيسية let أيضًا للإعلان عن متغير يسمى "i" والذي يحمل فهرس العنصر الحالي في تكرار الحلقة.
5. يعرض هذا السطر كل عنصر في القائمة برقم الفهرس الخاص به (يبدأ من 0).

ما هو الزاوي

Angular هو إطار عمل ويب مفتوح المصدر للواجهة الأمامية يعتمد على JavaScript يتم صيانته بشكل أساسي بواسطة Google ومجتمع من الأفراد والشركات لمواجهة العديد من التحديات التي تواجه تطوير تطبيقات الصفحة الواحدة. تكمل مكونات JavaScript Apache Cordova ، وهو إطار عمل يستخدم لتطوير تطبيقات الأجهزة المحمولة عبر الأنظمة الأساسية. ويهدف إلى تبسيط كل من تطوير واختبار هذه التطبيقات من خلال توفير إطار عمل لنموذج جانب العميل - عرض - متحكم (MVC) ونموذج عرض ونموذج عرض (MVVM) ، إلى جانب المكونات المستخدمة بشكل شائع في تطبيقات الإنترنت الغنية.

ng للعنصر

NgFor هو توجيه هيكلي Angular يسمح لنا بالتكرار عبر البيانات وإنشاء قالب لكل عنصر في مصفوفة أو كائن. يتم استخدامه لتكرار عنصر HTML معين لعدد محدد من المرات. يمكن استخدام NgFor لعرض البيانات من مصفوفة أو كائن أو سلسلة. يمكن استخدامه أيضًا لإنشاء عناصر HTML بناءً على قيم مصفوفة أو كائن. يتم استخدام NgFor عادةً مع توجيهات Angular الأخرى مثل ngIf و ngSwitch.

كيفية الحصول على فهرس عنصر ngFor

يمكنك استخدام الكلمة الأساسية index للحصول على فهرس عنصر في حلقة ngFor. بناء الجملة لهذا هو كما يلي:

{{i}} – {{item}}

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

الوظائف ذات الصلة:

اترك تعليق