تصفية النتائج (البحث) عن طريق Angular عبر (Find, Filter)

الطريق الأفضل والأسرع:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

  name: 'UserSearchPipe',

  pure: false

})

export class UserSearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const searchText = new RegExp(args, 'ig');

    const searchFields = ['ar_employee_name', 'en_employee_name', 'mobile', 'email', 'employee_id']; // Replace with your actual field names

    if (value) {

      return value.filter((user: any) => {

        return searchFields.some(field => user[field].toLowerCase().search(searchText) !== -1);

      });

    }

  }

}

this.allItems?.filter((element:any) => {return element.classification?.ar_name === value.ar_name })

 تصفية النتائج تكون إما عن طريق Find للعنصر الواحد أو Filter للكمية الكبيرة:

هناك طريقتان أساسيتان للعثور على العناصر في مصفوفة داخل تطبيقات Angular:

باستخدام طريقة البحث ():

طريقة البحث () هي وظيفة مضمنة في Javascript يمكنك استخدامها مباشرة في مكونات Angular الخاصة بك. إنه يتكرر عبر المصفوفة ويعيد العنصر الأول الذي يلبي وظيفة الاختبار المتوفرة.

وهنا بناء الجملة:

تايب سكريبت

const element =myArray.find(element => {

    // Your condition to test each element

    return element.property === value; // Replace with your logic

});

يرجى استخدام الرمزي بحذر.

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

إذا لم يفي أي عنصر بالشرط، فستُرجع الدالة find () قيمة غير محددة.

باستخدام طريقة findIndex ():

تشبه طريقة findIndex () طريقة find () ولكن بدلاً من إرجاع العنصر نفسه، فإنها تُرجع فهرس العنصر الأول الذي يطابق الشرط.

وهنا بناء الجملة:

تايب سكريبت

const index = myArray.findIndex(element => {

    // Your condition to test each element

    return element.property === value; // Replace with your logic

});

يرجى استخدام الرمزي بحذر.

يعثر مقتطف التعليمات البرمجية هذا على فهرس العنصر الأول في myArray حيث تساوي الخاصية قيمة محددة. إذا لم يتطابق أي عنصر مع الشرط، فستُرجع الدالة findIndex()‎ -1.

مثال في المكون الزاوي:

تايب سكريبت

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

@Component({

selector: 'app-my-component',

templateUrl: './my-component.html',

styleUrls: ['./my-component.css']

})

export class MyComponent {

myArray = [

{ id: 1, name: 'Alice' },

{ id: 2, name: 'Bob' },

{ id: 3, name: 'Charlie' }

];

findElementById(id: number) {

const element = this.myArray.find(element => element.id === id);

if (element) {

console.log('Found element:', element);

} else {

console.log('Element with id', id, 'not found');

}

}

findIndexById(id: number) {

const index = this.myArray.findIndex(element => element.id === id);

if (index !== -1) {

console.log('Element found at index:', index);

} else {

console.log('Element with id', id, 'not found');

}

}

}

يرجى استخدام الرمزي بحذر.

يحدد هذا المثال مجموعة من الكائنات وطريقتين:

يستخدم findElementById find() للبحث عن عنصر من خلال خاصية المعرف الخاص به وتسجيله في وحدة التحكم.

يستخدم findIndexById findIndex() للبحث عن فهرس عنصر من خلال خاصية المعرف الخاص به ويسجل الفهرس إلى وحدة التحكم.

تذكر استبدال المنطق الموجود في الشرط (element.property === value) بمعاييرك المحددة للعثور على العناصر في المصفوفة الخاصة بك.

المصدر:
https://g.co/gemini/share/2c976b3aba9f