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

استخدام الأنابيب المدمجة (Date, Currency, Json)

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

19. استخدام الأنابيب المدمجة (Date, Currency, Json)

الأنابيب (Pipes) هي طريقة لتحويل البيانات المعروضة في القالب قبل تقديمها للمستخدم. تُستخدم في الاستيفاء أو عمليات الربط الأخرى باستخدام عامل الأنبوب (|).

الصيغة

html {{ expression | pipeName : argument1 : argument2 }}

الأنابيب المدمجة الشائعة

1. DatePipe

تنسيق قيمة التاريخ وفقاً لقواعد اللغة المحلية.

typescript currentDate: Date = new Date();

html

<p>Full Date: {{ currentDate | date }}</p> <!-- May 20, 2024 --> <p>Short Date: {{ currentDate | date:'shortDate' }}</p> <!-- 5/20/24 --> <p>Custom Format: {{ currentDate | date:'dd/MM/yyyy HH:mm' }}</p>

2. CurrencyPipe

تنسيق رقم كسلسلة نصية للعملة.

typescript productPrice: number = 129.50;

html

<!-- العملة الافتراضية (USD) --> <p>Price: {{ productPrice | currency }}</p> <!-- $129.50 --> <!-- عملة مخصصة (EUR)، عرض الرمز، تنسيق مخصص --> <p>EU Price: {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}</p>

3. JsonPipe

مفيد لتصحيح الأخطاء. يحول قيمة JavaScript إلى سلسلة نصية بتنسيق JSON.

typescript userData = { id: 1, status: 'active' };

html

<!-- عرض هيكل الكائن بالكامل --> <pre>{{ userData | json }}</pre>

4. أنابيب أخرى

  • UppercasePipe, LowercasePipe
  • SlicePipe (جزء من سلسلة نصية أو مصفوفة)
  • DecimalPipe (تنسيق الأرقام)