मैं अपने प्रोजेक्ट पर एकाधिक फ़िल्टर का उपयोग करना चाहता हूं।

मैं 3 फिल्टर का उपयोग करता हूं: मूल्य सीमा, प्रकार, अपलोड की गई तिथि।

Uploaded_date : एक चेकबॉक्स है, जिसमें तीन फ़ील्ड हैं: आज, पिछले 2 दिन, पिछले 7 दिन, कोई भी।

टाइप करें: एक चेकबॉक्स है, जिसमें तीन चेकबॉक्स हैं: टाइप ए, टाइप बी, टाइप सी।

मूल्य सीमा : 20 और 100 के बीच की एक संख्या सीमा है।

मेरे तीन फ़िल्टर एक ही समय में Agular (बदलें) विधि के साथ काम करना चाहिए। अगर मैं अपना पहला फ़िल्टर अपडेट करता हूं, और अगला फ़िल्टर अपडेट करता हूं, तो फ़िल्टर पहले फ़िल्टर के परिणामों पर और बाकी के लिए इसी तरह लागू किए जाने चाहिए।

मेरा stackblitz

क्या मेरे सभी फ़िल्टर एक साथ काम करने का कोई तरीका है। हर फिल्टर के लिए मैं बदलता हूं। अगले वाले को पिछले वाले पर लागू करना चाहिए और बाकी के लिए ऐसा ही।

1
Ayoub 2 अगस्त 2020, 13:16

2 जवाब

सबसे बढ़िया उत्तर

एकाधिक if शर्तों का उपयोग करने के बजाय मैं आपको अपना कोड निम्नानुसार अपडेट करने का सुझाव देता हूं (StackBlitz)।

vehiculeFilter: any[] = [];
postedWithinFilter: any[] = [];

सरणियों और स्प्रेड ऑपरेटर की शक्ति के साथ अपने फ़िल्टर को सिंक में रखें:

onChangeUploadedDate($event, duration) {
    const checked = $event.target.checked;
    if(checked) {
      this.postedWithinFilter = [...this.postedWithinFilter, {...duration}];
    } else {
      this.postedWithinFilter = [...this.postedWithinFilter.filter(x => x.id !== duration.id)];
    }
  }

onChangeVehicule($event, vehiculeType) {
    const checked = $event.target.checked;
    if(checked) {
      this.vehiculeFilter = [...this.vehiculeFilter, {...vehiculeType}];
    } else {
      this.vehiculeFilter = [...this.vehiculeFilter.filter(x => x.id !== vehiculeType.id)];
    }
  }

फिर अपने UI को सिंक में रखने के लिए गेटर्स और एरे फिल्टर की शक्ति का उपयोग करें:

public get filteredData(): any[] {
    let filtered = [...this.datas];

    if(this.postedWithinFilter.length > 0) {
      filtered = filtered.filter(x => {
        const p = this.postedWithinFilter.find(v => {
          const d = new Date();
          d.setDate(d.getDate()-(v.value));
          const tDate = new Date(x.date);
          return tDate >= d;
        });
        return p != null;
      });
    }

    if(this.vehiculeFilter.length > 0 ) {
      filtered = filtered.filter(x => {
        const t = this.vehiculeFilter.find(v => v.name === x.type);
        return t != null;
      });
    }
    return filtered;
  }

शुभकामनाएं

1
alessandro 2 अगस्त 2020, 17:18

आप डेटा और फ़िल्टरिंग के लिए rxjs वेधशालाओं और पाइपों का उपयोग करने पर विचार कर सकते हैं जो कोणीय में जाने का सामान्य प्रतिक्रियाशील तरीका है। https://stackblitz.com/edit/ angular-vwtnmt?embed=1&file=src/app/app.component.html

  private data$ = new BehaviorSubject<Data[]>([]);
  dataWithFilters$: Observable<Data[]> = this.data$.pipe(
    this.vehicleTypeFilter,
    this.dateOptionsFilter,
    this.priceFilter
  );
  get vehicleTypeFilter() {...}
  get dateOptionsFilter() {...}
  get priceFilter() {...}

एचटीएमएल:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">titre</th>
            <th scope="col">price range</th>
            <th scope="col">date</th>
            <th scope="col">type</th>
        </tr>
    </thead>
    <tbody *ngFor="let data of (dataWithFilters$ | async)">
        <tr>
            <th scope="row">{{data.id }}</th>
            <td>{{data.titre }}</td>
            <td>{{data.price_range }}</td>
            <td>{{data.date | date: 'medium'}}</td>
            <td>{{data.type}}</td>
        </tr>
    </tbody>
</table>
1
Eric Aska 2 अगस्त 2020, 18:50