Fonction de filtrage sur liste d'objets Firebase

**ModizDev** · 30/07/2020, 11h53

Bonjour à tous,

Je suis entrain de créer une application avec Angular 8 et Firebase.
J'affiche une liste d'item dans une boucle avec une pipe 'keyvalue'. Jusqu'ici ça fonctionne bien.
J'ai crée une fonction de filtrage pour afficher les items correspondants à la valeur saisie dans un input.
J'utilise 'Object.values() dans ma fonction mais ça supprime les 'key' de mes items filtrés et les remplace par des index.
Les 'key' ne correspondent plus aux items
Est-ce que vous auriez une autre méthode pour arriver à conserver les 'key' ?

Sources: https://github.com/Mobize/BlocNote

Le schéma de ma bdd Firebase :
Nom : items.PNG
Affichages : 730
Taille : 24,5 Ko

Nom : items.PNG
Affichages : 730
Taille : 24,5 Ko

Le code du template :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<input #query (keyup)="filter(query.value)" type="text" class="form-control search" placeholder="Recherche...">
<!-- items -->
    <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>

La fonction filter() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
  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;
  }