التحكم في عناصر ngFor في Angular 2 باستخدام ViewChild

في سياق تطوير تطبيق Angular 2 الخاص بك واستخدام تكنولوجيا ngFor لتكرار العناصر، تواجهك تحديات في الوصول إلى العناصر المُنشأة داخل حلقة ngFor لتطبيق تحكم أو إضافة تأثيرات معينة عليها. سأشرح لك كيفية القيام بذلك بطريقة فعّالة ومناسبة.

في البداية، يُفضل أن تعتمد على إطار عمل Angular 2 للتعامل مع العناصر بدلاً من استخدام العمليات المباشرة على DOM. يُعتبر ViewChild أداة قوية للوصول إلى العناصر داخل المكونات. قم بتضمين ViewChild في مكون Angular الخاص بك واستخدمه للإشارة إلى العناصر التي تم إنشاؤها داخل حلقة ngFor.

على سبيل المثال، يمكنك تحقيق ذلك باستخدام الكود التالي:

typescriptCopy code
import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-cookie-list',
  template: `
    

      
Cookie tab
      
Cookie Details
    
  `,
  styles: [`
    .is-active {
      // أي خاصية CSS تريدها للحالة النشطة
      background-color: #f0f0f0;
    }
  `]
})
export class CookieListComponent {
  @ViewChild('tabButton') tabButton: ElementRef;
  @ViewChild('tabContent') tabContent: ElementRef;

  cookies: Cookie[] = [...] // قم بتعريف البيانات الخاصة بك هنا

  showCookie(cookie: Cookie, index: number) {
    // قم بتحديث حالة العنصر النشط
    this.resetActiveState();
    this.tabButton.nativeElement[index].classList.add('is-active');
    this.tabContent.nativeElement[index].classList.add('is-active');

    // قم بتنفيذ الإجراءات الأخرى الخاصة بك
    // ...
  }

  resetActiveState() {
    // إزالة الحالة النشطة من جميع العناصر
    this.tabButton.nativeElement.forEach(button => button.classList.remove('is-active'));
    this.tabContent.nativeElement.forEach(content => content.classList.remove('is-active'));
  }
}

interface Cookie {
  id: number;
  // أي خصائص إضافية للكوكيز يمكنك إضافتها هنا
}

هذا الكود يستخدم ViewChild للوصول إلى العناصر التي يتم إنشاؤها داخل حلقة ngFor. يقوم showCookie بتحديث حالة العناصر لتحقيق التأثير المطلوب. كما يوفر resetActiveState وظيفة لإزالة الحالة النشطة من جميع العناصر قبل تفعيل العنصر الجديد.

لاحظ أنه يجب عليك استبدال نموذج Cookie ببياناتك الفعلية. يمكنك تخصيص الأكواد وفقًا لاحتياجات مشروعك.

بالطبع، دعني أقدم لك مزيد من المعلومات حول الكود والمفاهيم المستخدمة.

في هذا الكود، يُستخدم @ViewChild للوصول إلى العناصر النشطة داخل مكون Angular. هذا الديكور يسمح بالوصول إلى العناصر المحددة في القالب (template) من خلال الكود TypeScript. تم تعيين اسم المتغير بعلامة التجزئة (#) في القالب، ويُستخدم هذا الاسم للإشارة إلى العنصر المعني في الكود.

typescriptCopy code
@ViewChild('tabButton') tabButton: ElementRef;
@ViewChild('tabContent') tabContent: ElementRef;

هنا يتم استخدام @ViewChild للإشارة إلى العناصر التي تم تحديدها في القالب باسم ‘tabButton’ و ‘tabContent’. يتم تعيين هذه العناصر إلى متغيرات tabButton و tabContent من نوع ElementRef. ElementRef هو كلاس يُستخدم للوصول إلى العناصر الفعلية في الDOM.

typescriptCopy code
showCookie(cookie: Cookie, index: number) {
  // قم بتحديث حالة العنصر النشط
  this.resetActiveState();
  this.tabButton.nativeElement[index].classList.add('is-active');
  this.tabContent.nativeElement[index].classList.add('is-active');

  // قم بتنفيذ الإجراءات الأخرى الخاصة بك
  // ...
}

تُظهر وظيفة showCookie كيف يتم استخدام this.tabButton.nativeElement و this.tabContent.nativeElement للوصول إلى العناصر داخل الحلقة ngFor. تم تمرير index لتحديد العنصر الذي يجب تحديث حالته. يتم إضافة الفئة ‘is-active’ باستخدام classList.add لتعيين التأثير المطلوب على العناصر.

typescriptCopy code
resetActiveState() {
  // إزالة الحالة النشطة من جميع العناصر
  this.tabButton.nativeElement.forEach(button => button.classList.remove('is-active'));
  this.tabContent.nativeElement.forEach(content => content.classList.remove('is-active'));
}

وظيفة resetActiveState تقوم بإزالة الحالة النشطة من جميع العناصر. تستخدم forEach لتكرار العناصر وتُزيل الفئة ‘is-active’ باستخدام classList.remove.

يرجى مراعاة أن هذا المثال هو إشارة توجيهية، ويمكن تكييفه بناءً على احتياجات مشروعك الفعلية.