تحديث القائمة في Angular 2: استخدام trackBy وإدارة الانتقالات

في Angular 2، عند استخدام ngFor، يعتمد التحديث على المصفوفة أو القائمة التي يتم الاعتماد عليها في ngFor. عندما يتم تغيير البيانات التي يعتمد عليها ngFor، يتم إعادة بناء DOM لكل عنصر في القائمة. هذا يعني أنه حتى لو لم يتغير قيمة “station.perc”، فإن Angular سيفترض أن العنصر تغير وسيقوم بإعادة بناء DOM مما يؤدي إلى تشغيل ngOnChanges() مرة أخرى.

لحل هذه المشكلة وتجنب إعادة بناء DOM بشكل غير ضروري، يمكنك استخدام تقنية تُعرف بـ “trackBy” في ngFor. تقنية trackBy تسمح لك بتحديد مفتاح لكل عنصر في القائمة، وبالتالي Angular يستطيع التعرف على التغييرات في العناصر بناءً على هذه المفاتيح دون الحاجة إلى إعادة بناء DOM إذا لم يتغير المفتاح.

في مكان استخدام ngFor في القالب HTML، يجب تمرير دالة trackBy والتي تعيد المفتاح الموافق لكل عنصر. على سبيل المثال:

htmlCopy code
<div *ngFor="let station of stations; trackBy: trackByFn" class="station">
    <bar [perc]="station.perc" class="bar">bar>
div>

ثم يجب تعريف الدالة trackByFn في مكون الوالد (ParentComponent) بحيث تعيد المفتاح المناسب لكل عنصر. مفتاح يمكن أن يكون على سبيل المثال معرف فريد لكل عنصر:

typescriptCopy code
trackByFn(index, item) {
    return item.id; // افترض أن هناك خاصية id في كل عنصر
}

باستخدام trackBy، يمكنك الآن ضمان أن Angular لن يعيد بناء DOM إلا إذا تغيرت العناصر بناءً على المفاتيح التي تقوم بتحديدها. وبالتالي، يمكنك الآن تحقيق التحديثات بدون إعادة بناء DOM غير الضروري وبدون إعادة تشغيل الانتقالات من الصفر.

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

لتحقيق هذا الهدف، يمكنك تخزين القيمة السابقة لكل عنصر في القائمة واستخدامها لبدء الانتقال من هذه القيمة بدلاً من الصفر. في مكون الوالد (ParentComponent)، يمكنك إضافة خاصية إضافية لتخزين القيمة السابقة لكل عنصر، على سبيل المثال:

typescriptCopy code
previousPercValues = {};

updateData(){
    const url = 'http://....';
    this.http.get(url)
      .map(res => res.json())
      .subscribe(data => {
        data.forEach(station => {
          if (this.previousPercValues.hasOwnProperty(station.id)) {
            station.previousPerc = this.previousPercValues[station.id];
          } else {
            station.previousPerc = 0; // أو أي قيمة افتراضية أخرى
          }
          this.previousPercValues[station.id] = station.perc;
        });

        this.stations = data;
      });
}

ثم في مكون الابن (BarComponent)، يمكنك استخدام القيمة السابقة لبدء الانتقال بدلاً من الصفر. يمكنك استخدام ngIf لتطبيق الانتقالات فقط عندما تكون القيمة السابقة معرفة. على سبيل المثال:

htmlCopy code
<div *ngIf="previousPerc !== undefined" [@slide]="{value: {from: previousPerc, to: perc}}">
    <div class="bar" [style.width.%]="perc">div>
div>
<div *ngIf="previousPerc === undefined" class="bar" [style.width.%]="perc">div>

وبذلك، يمكنك تحقيق التحديثات المتدرجة بدءًا من القيمة السابقة لكل عنصر بدلاً من الصفر، مما يضمن تجربة مستخدم أفضل وأكثر سلاسة عند تحديث البيانات داخل ngFor دون إعادة بناء DOM غير الضروري.