الربط النصي لعرض البيانات

الربط النصيString Interpolationالأقواس المزدوجةعرض البياناتAngular 22.1

جدول مرجعي سريع

مفهوم الربط النصي	طريقة الكتابة في القالب	الغرض البرمجي والاستخدام
عرض المتغيرات البسيطة	{{ variableName }}	إظهار قيمة نصية أو رقمية مخزنة في صنف المكون
تنفيذ العمليات الحسابية البسيطة	{{ 10 + 20 }}	حساب القيم وعرض ناتجها المباشر داخل القالب دون الحاجة لدوال معقدة
استدعاء الدوال البرمجية	{{ calculateTotal() }}	تمرير النرج الناتج من تنفيذ دالة مباشرة إلى الواجهة
استخدام السلاسل النصية القوالب	{{ 'مرحباً ' + name }}	دمج النصوص والمتغيرات ببعضها داخل الأقواس المزدوجة

الشرح

ننتقل في هذا الدرس إلى التفصيل العملي لأحد أكثر أنواع ربط البيانات استخداماً في أنجولر الإصدار 22.1، ألا وهو الربط النصي (String Interpolation). يُعد هذا الأسلوب البوابة الأساسية لعرض القيم والمتغيرات القادمة من ملف صنف المكون (TypeScript) مباشرة داخل عناصر ملف قالب واجهة المستخدم (HTML) بأسلوب نظيف وسهل القراءة.

تفصيل فلسفة وعمل الربط النصي

صيغة الأقواس المزدوجة (Mustache Syntax):

يتم تضمين المتغيرات أو التعبيرات البرمجية داخل الأقواس المزدوجة {{ }}، حيث يقوم محرك أنجولر بتقييم محتواها وتحويله تلقائياً إلى نص (String) ليتم عرضه داخل عناصر الـ HTML المختلفة.

التعامل مع الحالات الفارغة أو غير المعرفة:

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

أمثلة برمجية: استخدام الربط النصي لعرض المتغيرات والنواتج

المثال الأول: عرض النصوص والأرقام والعمليات الحسابية البسيطة

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-string-interpolation-demo',
5	standalone: true,
6	template: `
7	<div class="profile-card">
8	<!-- 1. عرض متغير نصي عادي -->
9	<h3>اسم المستخدم: {{ fullName }}</h3>
10
11	<!-- 2. عرض متغير رقمي -->
12	<p>العمر: {{ userAge }} سنة</p>
13
14	<!-- 3. إجراء وتخزين عملية حسابية مباشرة داخل الأقواس -->
15	<p>المبلغ بعد الإضافة: {{ itemPrice + taxRate }} جنيه</p>
16
17	<!-- 4. دمج النصوص مع المتغيرات -->
18	<p>{{ 'حالة الحساب: ' + accountStatus }}</p>
19	</div>
20	`
21	})
22	export class StringInterpolationDemoComponent {
23	fullName = 'سارة أحمد';
24	userAge = 28;
25	itemPrice = 200;
26	taxRate = 25;
27	accountStatus = 'مفعل وجاهز للاستخدام';
28	}

أمثلة برمجية: استدعاء الدوال وعرض نواتجها الديناميكية

المثال الثاني: ربط ناتج تنفيذ الدوال البرمجية مباشرة بالقالب

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-function-interpolation',
5	standalone: true,
6	template: `
7	<div class="cart-summary">
8	<h4>ملخص سلة المشتريات</h4>
9
10	<!-- استدعاء دالة وعرض قيمتها المرتجعة -->
11	<p>إجمالي المنتجات: {{ getCartItemsCount() }} منتج</p>
12
13	<!-- استدعاء دالة لمعالجة النصوص وعرضها -->
14	<p class="badge">{{ getFormattedDiscountMessage() }}</p>
15	</div>
16	`
17	})
18	export class FunctionInterpolationComponent {
19	cartItems = ['شاشة ذكية', 'لوحة مفاتيح ميكانيكية', 'فأرة لاسلكية'];
20	hasActiveDiscount = true;
21
22	getCartItemsCount(): number {
23	return this.cartItems.length;
24	}
25
26	getFormattedDiscountMessage(): string {
27	return this.hasActiveDiscount ? 'تهانينا! لديك خصم خاص 20%' : 'لا توجد عروض متاحة حالياً';
28	}
29	}

نصائح احترافية

—تجنب كتابة العمليات المعقدة أو الدوال الثقيلة داخل الأقواس المزدوجة!
—نظراً لأن أنجولر يقوم بتقييم تعبيرات الربط النصي بشكل متكرر أثناء دورة حياة الكشف عن التغييرات، فإن وضع دوال مكلفة برمجياً داخل {{ }} سؤدي بمرور الوقت إلى بطء ملحوظ في أداء واجهة المستخدم وتجربة التصفح.

الدرس السابق

أساسيات ربط البيانات

الدرس التالي

ربط خصائص عناصر HTML ديناميكياً

مفهوم الربط النصي

طريقة الكتابة في القالب

الغرض البرمجي والاستخدام

عرض المتغيرات البسيطة

إظهار قيمة نصية أو رقمية مخزنة في صنف المكون

تنفيذ العمليات الحسابية البسيطة

حساب القيم وعرض ناتجها المباشر داخل القالب دون الحاجة لدوال معقدة

استدعاء الدوال البرمجية

تمرير النرج الناتج من تنفيذ دالة مباشرة إلى الواجهة

استخدام السلاسل النصية القوالب

دمج النصوص والمتغيرات ببعضها داخل الأقواس المزدوجة

تفصيل فلسفة وعمل الربط النصي

صيغة الأقواس المزدوجة (Mustache Syntax):

التعامل مع الحالات الفارغة أو غير المعرفة:

أمثلة برمجية: استخدام الربط النصي لعرض المتغيرات والنواتج

المثال الأول: عرض النصوص والأرقام والعمليات الحسابية البسيطة

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-string-interpolation-demo',
5	standalone: true,
6	template: `
7	<div class="profile-card">
8	<!-- 1. عرض متغير نصي عادي -->
9	<h3>اسم المستخدم: {{ fullName }}</h3>
10
11	<!-- 2. عرض متغير رقمي -->
12	<p>العمر: {{ userAge }} سنة</p>
13
14	<!-- 3. إجراء وتخزين عملية حسابية مباشرة داخل الأقواس -->
15	<p>المبلغ بعد الإضافة: {{ itemPrice + taxRate }} جنيه</p>
16
17	<!-- 4. دمج النصوص مع المتغيرات -->
18	<p>{{ 'حالة الحساب: ' + accountStatus }}</p>
19	</div>
20	`
21	})
22	export class StringInterpolationDemoComponent {
23	fullName = 'سارة أحمد';
24	userAge = 28;
25	itemPrice = 200;
26	taxRate = 25;
27	accountStatus = 'مفعل وجاهز للاستخدام';
28	}

أمثلة برمجية: استدعاء الدوال وعرض نواتجها الديناميكية

المثال الثاني: ربط ناتج تنفيذ الدوال البرمجية مباشرة بالقالب

typescript

1	import { Component } from '@angular/core';
2
3	@Component({
4	selector: 'app-function-interpolation',
5	standalone: true,
6	template: `
7	<div class="cart-summary">
8	<h4>ملخص سلة المشتريات</h4>
9
10	<!-- استدعاء دالة وعرض قيمتها المرتجعة -->
11	<p>إجمالي المنتجات: {{ getCartItemsCount() }} منتج</p>
12
13	<!-- استدعاء دالة لمعالجة النصوص وعرضها -->
14	<p class="badge">{{ getFormattedDiscountMessage() }}</p>
15	</div>
16	`
17	})
18	export class FunctionInterpolationComponent {
19	cartItems = ['شاشة ذكية', 'لوحة مفاتيح ميكانيكية', 'فأرة لاسلكية'];
20	hasActiveDiscount = true;
21
22	getCartItemsCount(): number {
23	return this.cartItems.length;
24	}
25
26	getFormattedDiscountMessage(): string {
27	return this.hasActiveDiscount ? 'تهانينا! لديك خصم خاص 20%' : 'لا توجد عروض متاحة حالياً';
28	}
29	}