16. توجيهات الهيكلة المدمجة: *NgFor

يُستخدم *NgFor للتكرار على مجموعة (مثل مصفوفة) وعرض قالب مرة واحدة لكل عنصر في تلك المجموعة.

التكرار البسيط

فئة المكون:

typescript interface Product { id: number; name: string; price: number; }

export class ProductListComponent { products: Product[] = [ { id: 1, name: 'Laptop', price: 1200 }, { id: 2, name: 'Mouse', price: 25 }, { id: 3, name: 'Keyboard', price: 75 } ]; }

القالب:

html

• ID: {{ product.id }} | Name: {{ product.name }} | Price: ${{ product.price }}

المتغيرات المحلية المصدرة

يكشف *NgFor عن عدة متغيرات محلية توفر معلومات حول حالة التكرار:

مثال باستخدام الفهرس وربط الفئة:

html

• ({{ i + 1 }}) {{ item.name }}

دالة trackBy (الأداء)

عندما يتغير مصدر البيانات (على سبيل المثال، يتم إضافة عنصر أو إزالته أو إعادة ترتيبه)، يقوم Angular بإعادة بناء شجرة DOM بأكملها للقائمة افتراضياً. وهذا غير فعال.

تخبر trackBy نظام Angular بكيفية تحديد كل عنصر بشكل فريد. إذا لم تتغير الهوية (على سبيل المثال، id المنتج)، فإن Angular يعيد استخدام عنصر DOM الموجود.

typescript trackProductById(index: number, product: Product): number { return product.id; }

html