मैं अपने संग्रहीत डेटा के शीर्षक पर एक फ़िल्टर लागू करना चाहता हूं लेकिन फ़िल्टर करने के बाद मेरे फ़िल्टर किए गए डेटा की संरचना समान नहीं है। मेरे डेटा की "कुंजी" को फ़िल्टर द्वारा हटा दिया जाता है और एक अनुक्रमणिका में बदल दिया जाता है।

रिपॉजिटरी का लिंक : https://github.com/Mobize/BlocNote/blob/fdb5a4e60a0094cb0d5cc80e80a3e3ffcf9347ae/src/app/single-section/single-section.component.ts#L88

यहाँ मेरी डेटाबेस संरचना है: डेटाबेस संरचना

फ़िल्टर करने से पहले मेरे आइटम: फ़िल्टर करने से पहले

छानने के बाद: फ़िल्टर करने के बाद

मेरा घटक कोड:

filter(query: string) {
    this.filteredItems = (query) ?
    Object.values(this.items).filter(p=>p.title.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
    .toLowerCase().includes(query.toLowerCase())) :
    this.items; 
}

मेरा टेम्पलेट:

<input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Recherche...">
<mat-list-item id="item_list" *ngFor="let item of filteredItems | keyvalue ; let i = index" [class.changeColor]="item.key == selectedValue">
  <a (click)="openItem(item, item.key)" *ngIf="item.value.title" matLine><mat-icon [class.yellow]="item.key == selectedValue">code</mat-icon>{{item.value.title}}</a>
  <button mat-icon-button>
    <mat-icon id="edit_item_icon" (click)="onEditItem(item)">edit</mat-icon>
    <mat-icon (click)="openDialog(item.key, item.value.title)">delete_sweep</mat-icon>
 </button>
</mat-list-item>

इसलिए जब मैं किसी आइटम को फ़िल्टर करने के बाद संपादित करने के लिए उस पर क्लिक करता हूं, तो यह एक नया आइटम बनाता है ....

0
Olivier Charpentier 11 सितंबर 2020, 16:51

1 उत्तर

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

इसके माध्यम से लूप करें और indexOf() के साथ फ़िल्टर करें:

filter(query: string) {
    const result: object = {};

    for (let key in this.items) {
      const data = this.items[key];

      if (this.items.hasOwnProperty(key) && data.title &&
        data.title.normalize("NFD").replace(/[\u0300-\u036f]/g, "").indexOf(query) !== -1) {
        result[key] = data;
      }
    }

    this.filteredItems = Object.keys(result).length ? result : this.items;
}

यदि आप डोम में उपयोग कर रहे हैं तो मैं आपको this.filteredItems असाइनमेंट को ngZone.run() में लपेटने की दृढ़ता से अनुशंसा करता हूं:

this.ngZone.run(() => {
      this.filteredItems = Object.keys(result).length ? result : this.items;
});

constructor(private ngZone: NgZone) के साथ अपने कंस्ट्रक्टर में सेवा आयात करना याद रखें

0
Santi Barbat 11 सितंबर 2020, 19:38