عند استخدام تعبيرات في القوالب الخاصة بـ Angular، يجب أن تكون متأكدًا من أن المتغيرات التي تحاول الوصول إليها معرفة بشكل صحيح. في حالتك، الخطأ “Cannot read property ‘stringify’ of undefined” يشير إلى أن Angular لا يستطيع العثور على الدالة stringify
داخل نطاق القالب الخاص بك.
لحل هذه المشكلة، يمكنك تخزين قيم obj1
و obj2
في المكون الخاص بك ومن ثم استخدامها في القالب بدلاً من محاولة استخدام JSON.stringify
مباشرة. إليك كيف يمكنك تحقيق ذلك:
-
تحديثات jQuery للدعم في IE05/04/2024
-
كيفية إنشاء أشكال متجهية في Android01/04/2024
- قم بتحديد متغيرين في المكون الخاص بك لتخزين الكائنات
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>
باستخدام هذا النهج، ستكون عملية مقارنة الكائنات أكثر فعالية من حيث الأداء وأقل استهلاكًا للموارد.