العودة إلى الدورة

صيغة القالب (Template Syntax): الاستيفاء (Interpolation) {{ }}

مطور Angular الشامل: من الصفر إلى الاحتراف

10. صيغة القالب (Template Syntax): الاستيفاء (Interpolation) {{ }}

تستخدم قوالب Angular صيغة القالب لعرض البيانات، والاستجابة لمدخلات المستخدم، وتعديل عرض HTML ديناميكياً. الاستيفاء هو أبسط شكل من أشكال ربط البيانات.

ما هو الاستيفاء؟

يستخدم الاستيفاء الأقواس المعقوفة المزدوجة ({{ }}) لتضمين قيمة خاصية المكون في قالب HTML.

يقوم Angular بتقييم التعبير داخل الأقواس، ويحول النتيجة إلى سلسلة نصية (string)، ويعرضها في المتصفح.

مثال على الاستيفاء

فئة المكون (data-display.component.ts):

typescript export class DataDisplayComponent { appName: string = 'Project Phoenix'; version: number = 1.0; launchDate: Date = new Date(2023, 11, 15); price: number = 49.99;

get statusMessage(): string { return Current status: Active (v${this.version}); } }

القالب (data-display.component.html):

html

Welcome to {{ appName }}

Version: {{ version }}

{{ statusMessage }}

Total items: {{ 5 + 3 }}

App Name Uppercase: {{ appName.toUpperCase() }}

Launch Date: {{ launchDate }}

قواعد الاستيفاء

  • يجب أن يُرجع التعبير سلسلة نصية أو قيمة يمكن تحويلها بسهولة إلى سلسلة نصية.
  • يمكنك الوصول إلى الخصائص، واستدعاء الأساليب (يُفضل المحضرات/getters)، واستخدام العمليات الحسابية/المنطقية الأساسية.
  • لا يمكنك استخدام التعيينات (=, +=, إلخ)، أو معاملات new، أو معاملات التسلسل مثل ++.