استخدام Angular 2: الحصول على حجم المصفوفة المرشحة بفعالية

في Angular 2، يمكنك الحصول على حجم المصفوفة المرشحة دون الحاجة إلى استدعاء الفلتر مرتين عن طريق استخدام ميزة إضافية في القالب. يمكنك استخدام قوسين مربعين مع العامل الشمالي “#” لإنشاء متغير مؤقت للقيمة المرشحة واستخدامه لاحقًا للحصول على حجم المصفوفة. فيما يلي كيفية تحقيق ذلك:

htmlCopy code
<p *ngFor="let singleCustomerData of customerData | myFilter:searchTerm; let filteredData = count">
  
p>

ثم في جزء الكود الخاص بك:

typescriptCopy code
import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `
    

      
    

		

	


	

		
	
    
The size of the filtered set is: {{ filteredData.length }}

		

	


	

		
	
  `,
})
export class YourComponent {
  // Your component logic here
}

باستخدام هذا النهج، يتم تخزين القيمة المرشحة في المتغير المؤقت filteredData، ويمكنك الوصول إلى حجم المصفوفة باستخدام filteredData.length دون الحاجة إلى استدعاء الفلتر مرتين.

فيما يلي شرح أكثر تفصيلاً حول كيفية الحصول على حجم المصفوفة المرشحة داخل Angular 2 وتفاصيل إضافية حول الكود المقدم:

1. استخدام قوسين مربعين (*ngFor) مع let واسم متغير مؤقت:
   في الكود المقدم، يتم استخدام الهيكل *ngFor لإعادة تكرار العناصر المرشحة. يتم استخدام let لإنشاء متغير مؤقت يُسمى filteredData لتخزين النتائج المرشحة.

   htmlCopy code
   <p *ngFor="let singleCustomerData of customerData | myFilter:searchTerm; let filteredData = count">
     
   p>
   

2. استخدام filteredData.length للحصول على حجم المصفوفة:
   بعد ذلك، يمكنك استخدام filteredData.length للحصول على عدد العناصر في المصفوفة المرشحة. هذا يُظهر في الجزء النهائي من الكود حيث يتم عرض حجم المصفوفة في عنصر p:

   htmlCopy code
   <p>The size of the filtered set is: {{ filteredData.length }}p>
   

3. تفاصيل إضافية حول الكود TypeScript:
   يتم استيراد الكلاس Component من @angular/core، ويتم تعريف YourComponent ككومبوننت Angular. يمكنك إضافة المزيد من المنطق الخاص بك داخل الكلاس، مثل تحميل البيانات (customerData) أو تعيين القيمة الابتدائية للبحث (searchTerm).

   typescriptCopy code
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'your-component',
     template: `
       
   
         
       
   
   		
   
   	
   
   
   	
   
   		
   	
       
   The size of the filtered set is: {{ filteredData.length }}
     `,
   })
   export class YourComponent {
     // Your component logic here
   }
   

   يمكنك تخصيص هذا الكود وفقًا لاحتياجات تطبيق Angular الخاص بك، مع الأخذ في اعتبارك أن هذا المثال يقدم نهجًا بديهيًا للحصول على حجم المصفوفة المرشحة.