كيفية مقارنة الكائنات في Angular؟
عند استخدام تعبيرات في القوالب الخاصة بـ Angular، يجب أن تكون متأكدًا من أن المتغيرات التي تحاول الوصول إليها معرفة بشكل صحيح. في حالتك، الخطأ “Cannot read property ‘stringify’ of undefined” يشير إلى أن Angular لا يستطيع العثور على الدالة stringify داخل نطاق القالب الخاص بك.
لحل هذه المشكلة، يمكنك تخزين قيم obj1 و obj2 في المكون الخاص بك ومن ثم استخدامها في القالب بدلاً من محاولة استخدام JSON.stringify مباشرة. إليك كيف يمكنك تحقيق ذلك:
- قم بتحديد متغيرين في المكون الخاص بك لتخزين الكائنات
obj1وobj2:
typescriptobj1: any = { /* قيمة الكائن الأول */ };
obj2: any = { /* قيمة الكائن الثاني */ };
- قم بتغيير قالب الـ
ليستخدم هذين المتغيرين بدلاً من استخدامJSON.stringify:
html<div [ngClass]="{ 'div-show': obj1 !== obj2 }">div>
بهذه الطريقة، سيتم فقط عرض العنصر
obj1 و obj2 مختلفة، دون الحاجة إلى استخدام JSON.stringify.المزيد من المعلومات
عند استخدام JSON.stringify في القوالب الخاصة ب Angular، يجب أن تأخذ في الاعتبار أنها قد تؤدي إلى أداء ضعيف في بعض الحالات، خاصة عند استخدامها في قوالب ذات تحميل عالي. هذا لأن JSON.stringify سيتم استدعاؤه في كل مرة يتم فيها إعادة تقديم المكون الذي يحتوي على القالب، مما يمكن أن يؤدي إلى زيادة في استهلاك الموارد وتأخر في الأداء.
بدلاً من ذلك، يمكنك استخدام مكتبة مثل lodash لمقارنة الكائنات بشكل فعال دون الحاجة إلى تحويلها إلى سلاسل JSON. على سبيل المثال، يمكنك استخدام lodash.isEqual لمقارنة الكائنات بدقة دون الحاجة إلى تحويلها:
typescriptimport { isEqual } from 'lodash';
// في الجزء الخاص بالمكون
isDifferent: boolean = false;
// داخل الطريقة التي تحدث فيها التغييرات على obj1 و obj2
this.isDifferent = !isEqual(this.obj1, this.obj2);
ثم يمكنك استخدام isDifferent في القالب لإظهار أو إخفاء العنصر بناءً على تغييرات الكائنات:
html<div [ngClass]="{ 'div-show': isDifferent }">div>
باستخدام هذا النهج، ستكون عملية مقارنة الكائنات أكثر فعالية من حيث الأداء وأقل استهلاكًا للموارد.
