التعديل على عنصر واحد من عناصر المصفوفة في Angular

  // للتعديل على عنصر
  updateItemByIdImmutable(data: EmployeeCard): void {
    this.items = this.items.map(item =>
      item.id === data.id ? data : item
    );
  }

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

1. التهيئة في المكون (Component):

لنفترض أن لديك مصفوفة تحتوي على بيانات، على سبيل المثال:

typescript
export class AppComponent {
  items: any[] = [
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 },
    { id: 3, name: 'Item 3', value: 30 }
  ];
}

2. التعديل على عنصر معين:

لإجراء تعديل على عنصر محدد، يمكنك استخدام طريقة البحث عن العنصر داخل المصفوفة (مثل find أو findIndex) أو استخدام الفهرس مباشرةً إذا كان لديك.

باستخدام `find` لتحديد العنصر:

typescript
updateItemById(id: number, newValue: number): void {
  const item = this.items.find(i => i.id === id);
  if (item) {
    item.value = newValue; // تعديل القيمة
  }
}

باستخدام `findIndex` لتحديد الفهرس:

typescript
updateItemByIndex(id: number, newValue: number): void {
  const index = this.items.findIndex(i => i.id === id);
  if (index !== -1) {
    this.items[index].value = newValue; // تعديل القيمة
  }
}

التعديل باستخدام الفهرس مباشرة:

إذا كنت تعرف الفهرس مسبقًا:

typescript
this.items[0].value = 50; // تعديل القيمة للعنصر الأول

3. التحديث في واجهة المستخدم:

تأكد من أن التغيير في البيانات ينعكس في الواجهة عن طريق استخدام التوجيهات مثل *ngFor لعرض البيانات. على سبيل المثال:

HTML:

html
<div *ngFor="let item of items">
  <p>{{ item.name }}: {{ item.value }}</p>
</div>

4. إعادة التهيئة (Change Detection):

في حال كنت تعدّل على بيانات معقدة (كائنات متداخلة)، قد تحتاج إلى إعادة إنشاء نسخة جديدة من المصفوفة لجعل Angular يكتشف التغييرات:

typescript
updateItemImmutable(id: number, newValue: number): void {
  this.items = this.items.map(item => 
    item.id === id ? { ...item, value: newValue } : item
  );
}

5. نصائح إضافية:

إذا كنت تعمل مع خدمات (Services) وتشارك المصفوفة بين مكونات متعددة، فتأكد من تحديث المرجع الموجود في الخدمة.
استخدم أدوات مثل RxJS إذا كنت بحاجة إلى تحديثات متزامنة بين المكونات.

بهذه الطريقة، يمكنك تعديل أي عنصر داخل المصفوفة بسهولة وبمرونة في Angular.

بدون Index

لتعديل عنصر في المصفوفة في Angular بدون استخدام الفهرس (index)، يمكنك الاعتماد على تحديد العنصر مباشرة باستخدام خصائصه (مثل id أو أي خاصية فريدة) وتعديله بناءً على ذلك.

مثال عملي

1. المصفوفة الأولية:

افترض أن لديك مصفوفة تحتوي على كائنات بالشكل التالي:

typescript
export class AppComponent {
  items: any[] = [
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 },
    { id: 3, name: 'Item 3', value: 30 }
  ];
}

2. التعديل باستخدام `find`:

يمكنك استخدام الدالة find لتحديد العنصر المطلوب بناءً على خاصية معينة (مثل id) ثم تعديله مباشرةً:

typescript
updateItemById(id: number, newValue: number): void {
  const item = this.items.find(i => i.id === id);
  if (item) {
    item.value = newValue; // تعديل القيمة
  }
}

شرح الكود:

find: تبحث عن العنصر الذي يطابق الشرط المحدد (i.id === id).
إذا تم العثور على العنصر (item ليس undefined)، يتم تعديل خاصية value مباشرةً.

3. طريقة الاستخدام:

يمكنك استدعاء الدالة وتعديل العنصر المطلوب كالتالي:

typescript
this.updateItemById(2, 50); // سيُعدل العنصر الذي id الخاص به هو 2 إلى قيمة 50.

3. التعديل بطريقة غير متزامنة مع إنشاء نسخة جديدة:

إذا كنت بحاجة إلى تحديث البيانات مع الحفاظ على المصفوفة بشكل غير متزامن (لتحفيز كشف التغييرات في Angular)، يمكنك استخدام طريقة النسخ:

typescript
updateItemByIdImmutable(id: number, newValue: number): void {
  this.items = this.items.map(item =>
    item.id === id ? { ...item, value: newValue } : item
  );
}

شرح الكود:

map: تُنشئ مصفوفة جديدة مع الاحتفاظ بجميع العناصر.
يتم تحديث العنصر الذي يطابق الشرط (item.id === id) مع الاحتفاظ بالكائنات الأخرى كما هي.

4. عرض البيانات في واجهة المستخدم:

HTML:

html
<div *ngFor="let item of items">
  <p>{{ item.name }}: {{ item.value }}</p>
</div>

5. نصائح:

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

بهذا، يمكنك تعديل عنصر من المصفوفة بناءً على خاصية معينة دون استخدام الفهرس!

يمكن أن تصدر عن ChatGPT بعض

بحث هذه المدونة الإلكترونية

مدونة Angular و NestJs